Drag & Drop in Blazor ohne JavaScript: Tutorial

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. Dieser Fachartikel zeigt einen einfachen, praxisnahen Weg.

‍

Umsetzung

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

‍

Drag-Element erstellen

‍

Drop-Bereich erstellen

‍

Ergebnis

‍

Mit dieser Basis kann das Drag-and-Drop-Verhalten erweitert werden.