Ich bin ein leidlicher Fan von XML (statt Json). Deshalb nehme ich eine XML Datei für folgendes Blazor Beispiel einer Liste; die der Benutzer per Drag&Drop neu sortieren kann.
1: <?xml version="1.0" encoding="utf-8"?>
2: <root>
3: <drop>vier</drop>
4: <drop>drei</drop>
5: <drop>zwei</drop>
6: <drop>eins</drop>
7: </root>
Besonders elegant übrigens mit den XML Literals in VB.NET zu programmieren. Blazor mag aber nur C# zumindest in der Razor Datei.
Eine kleine UX Frage bleibt offen. Wohin soll das Objekt verschoben werden. Ich habe für das Drag&Drop Beispiel das Objekt vor dem darunter liegenden eingefügt.
Jetzt kommt der Coding Zucker. Zuerst das laden der XML Daten
1: XmlDocument xml = new XmlDocument();
2: XmlNode DragNode;
3: string datei = @"C:\blazor\xmlfile.xml";
4: protected override void OnInitialized()
5: {
6: xml.Load(datei);
7: }
Dann springen wir den deklarativen HTML Blazor Part um die Liste darzustellen und die Drag und Drop Events zu verdrahten.
1: <ul ondragover="event.preventDefault();">
2: @foreach (XmlNode item in xml.SelectNodes("//root/drop"))
3: {
4: <li class="btn btn-outline-primary"
@key="item.InnerText" tabindex="1" draggable="true"
5: @ondrop="@(()=> Drop(item))"
6: @ondrag="@(()=> StartDrag(item))">
7: @item.InnerText
8: </li>
9: }
10: </ul>
Einfacher kann man eine XML nicht als Liste darstellen. Fehlt nur noch die Logik für den Start und Stop. Weniger Code geht nicht mehr.
1: void StartDrag(XmlNode item)
2: {
3: DragNode = item;
4: }
5: void Drop(XmlNode item)
6: {
7: if (item != null)
8: {
9: item.ParentNode.InsertBefore(DragNode, item);
10: xml.Save(datei);
11: }
12: }