Drag and Drop in Blazor-Anwendungen
Kolumne: .NETversum
Dieser Beitrag in der .NETversum-Kolumne zeigt, wie man das Ziehen und Fallenlassen in Blazor-Anwendungen ganz ohne Zusatzkomponenten realisiert.
Microsoft hatte ursprünglich in Planung, eine besondere Unterstützung für das Drag and Drop in Blazor-Anwendungen anzubieten. Dieser Plan wurde im März 2022 aber leider aufgegeben [1]. Drag and Drop lässt sich in Blazor-Anwendungen aber auch allein mit dem in die Browser eingebauten Drag and Drop API realisieren.
Praxisbeispiel MiracleList
Das MiracleList-Fallbeispiel [2] implementiert in allen Varianten (Blazor WebAssembly, Blazor Server, Blazor MAUI und Blazor Desktop) Drag and Drop für einzelne Aufgaben in andere Kategorien (Abb. 1).
Abb. 1: Drag and Drop einer Aufgabe von der Kategorie „Über die App“ in die Kategorie „Beruf“
Drag and Drop mit dem Browser-API
Das HTML DOM bringt bereits die Grundfunktionen für Drag and Drop mit im Drag and Drop API [3]. Die <li>-Elemente, die die Aufgaben in Abbildung 1 rendern, versieht man mit dem Attribut draggable="true" und einer Ereignisbehandlung für das DOM-Ereignis DragStart mit @ondragstart, an das man den Standardereignisparameter und das aktuelle Geschäftsobjekt (BO.Task) übergibt (Listing 1).
Listing 1: Ein Element, das man ziehen kann
<li
class="list-group-item"
style="Background-color: @((t.TaskID == this.task?.TaskID) ? "#E0EEFA" : "white")"
title="Task #@t.TaskID"
@onclick="() => ShowTaskDetail(t)"
draggable="true"
@ondragstart="(e) => DragTask(e, t)"
>
In der Ereignisbehandlung DragTask() (Listing 2) merkt man sich das vom Anwendungsnutzer angefasste BO.Task-Objekt. Zum Speichern des BO.Task-Objekts wird nicht die im DOM-Standard festgelegte dataTransfer-Eigenschaft des Ereignisobjekts verwendet. Das Setzen der dataTransfer-Eigenschaft ist in C# leider noch nicht vorgesehen, vgl. dazu Chris Sainty: „After a quick bit of experimenting, it seems at this point in time there isn’t a way to populate these values and pass data around using them.“ [4]
Listing 2: Ereignisbehandlungen nach dem Beginn des Ziehens einer Aufgabe
public BO.Task taskInDragAndDrop = null;
public void DragTask(DragEventArgs e, BO.Task task)
{
Util.Log("DragTask", task);
taskInDragAndDrop = task;
}
Damit die Aufgabenkategorieelemente (Abb. 1, links) zum Fallenlassen der gezogenen Aufgabe geeignet sind, muss man das Standardverhalten beim Ereignis DragOver unterbinden, denn der Browser verbietet im Standard die Drop-Operation. Zudem muss man hier das DOM-Ereignis Drop mit @ondrop abfangen (Listing 3).
Listing...