Drag & Drop in Blazor ohne JavaScript: Praktisches Tutorial mit Code-Beispiel

Drag & Drop in Blazor ohne JavaScript: Praktisches Tutorial mit Code-Beispiel

‍

Drag and Drop in ASP.NET Blazor ohne JavaScript umzusetzen, wirkt auf den ersten Blick kompliziert. Der Grund: Drag-and-Drop ist im Browser über DOM-Events und den DataTransfer-Mechanismus definiert – und dieser ist eine JavaScript-API. Dadurch entsteht schnell der Eindruck, dass Drag-and-Drop ohne JavaScript in Blazor nur mit Umwegen möglich ist.

Dieser Fachartikel zeigt einen einfachen, praxisnahen Weg, wie sich ein Drag-and-Drop-Verhalten in einer Blazor Server App auch ohne direkten JavaScript-Zugriff umsetzen lässt (mit den typischen Einschränkungen, die der Browser-Standard mit sich bringt).

‍

Was dabei zu beachten ist:

• DOM-Events (z. B. ondragstart, ondragover, ondrop) sind Browser-Funktionalität – nicht Teil der .NET-Runtime.

• Blazor kann diese Events binden und verarbeiten, aber nicht direkt auf den DataTransfer-Inhalt zugreifen, da dieser im Browser-Kontext als JavaScript-Objekt existiert.

• Für Szenarien wie das Übertragen von Dateien oder das Setzen/Auslesen von Payloads über e.dataTransfer.setData() bzw. e.dataTransfer.getData() ist in der Regel JavaScript erforderlich.

• Für einfache UI-Interaktionen (z. B. visuelles Verschieben, Statuswechsel, Drop-Zonen-Feedback) lässt sich jedoch auch ohne JavaScript eine saubere Lösung realisieren.

Umsetzung

In diesem Beispiel wird ein Element per Drag-and-Drop in eine Drop-Zone verschoben. Als Basis dient ein Blazor Server App Projekt.

Projekt anlegen

• In Visual Studio ein neues Projekt erstellen: Blazor Server App

• Unter Pages eine neue Razor Page anlegen, z. B. DragAndDrop.razor

Drag-Element erstellen

Wir benötigen am Anfang einen Bereich in dem man die Objekte per Drag And Drop verschieben kann:

‍

Als nächstes benötigen wir ein Objekt, dass gedraggt werden soll.  

‍

In diesem Bereich ist draggable nun bereits auch schon auf true gesetzt, zusätzlich habe ich diesem div noch eine CSS-Klasse gegeben, um das Drag and Drop visuell besser darstellen zu können:

‍

Im Codebereich wird nun ein bool und eine Methode fürs Starten vom Drag gesetzt, der Einfachheit halber nennen wir die Methode OnDragStart und geben dem div noch das @ondragstart Attribut.

‍

Im nächsten Schritt fügen wir im div das @ondragend Attribut und eine OnDragEnd Methode im Codeblock hinzu.

‍

Danach ergänzen wir im div noch ein wenig Styling, um alles optisch noch ein wenig zu ergänzen und fügen noch ein if hinzu.

‍

‍

Drop-Bereich erstellen

Jetzt kümmern wir uns um den Drop Bereich. Dafür fügen wir unserem Code ein weiteres div mit Styling hinzu und ergänzen ein string im Beispiel @dropClass.

‍

Zusätzlich erweitern wir das div um ondragover und die Attribute: @ondragenter, @ondragleave und @ondrop und ergänzen im Code die benötigten Methoden.

‍

‍

Als letztes fügen wir für die Navigation noch ein @page hinzu.

‍

‍

Nun erweitern wir noch das CSS für eine gute optische Darstellung.

‍

Ergebnis

Vor dem Drag: Drag-Element und Drop-Zone im Normalzustand.

Während des Vorgangs: Drag-Status aktiv, Drop-Zone zeigt Hover/Ready-State.

‍

Nach dem Drop: Element wurde logisch „verschoben“ bzw. der Zustand wurde aktualisiert.

‍

Mit dieser Basis kann das Drag-and-Drop-Verhalten erweitert werden, z. B. für mehrere Elemente, verschiedene Drop-Zonen oder zusätzliche Validierungslogik. Wichtig ist: ohne JavaScript bleibt man bei den Browser-Events, jedoch ohne Zugriff auf DataTransfer-Payloads.

‍

Fazit

Ob Drag-and-Drop in Blazor mit oder ohne JavaScript umgesetzt wird, hängt stark vom konkreten Anwendungsfall ab. Für einfache UI-Interaktionen reicht ein Blazor-only Ansatz häufig aus. Sobald jedoch Drag-Daten (DataTransfer) verarbeitet, Dateien übertragen oder komplexe Payloads gesetzt/ausgelesen werden sollen, ist JavaScript in der Praxis oft weiterhin der passendere Weg.

Damit bleibt die Wahl zwischen Drag-and-Drop mit oder ohne JavaScript ein individueller Abwägungsprozess, abhängig von technischen Anforderungen, Team-Know-how, Zeitbudget und internen Vorgaben.

‍

GitHub – Repository:

https://github.com/SDevKL/https-github.com-SDevKL-DragAndDropFach