https://mijn.warmtestad.nl/_content/Frontend.Shared.Library/SortableList.js

1window.draggingInit = function (id, group, pull, put, sort, handle, filter, component, forceFallback) {
2    var sortable = new Sortable(document.getElementById(id), {
3        draggable: 'li',
4        animation: 200,
5        group: {
6            name: group,
7            pull: pull || true,
8            put: put
9        },
10        filter: filter || undefined,
11        sort: sort,
12        forceFallback: forceFallback,
13        handle: handle || undefined,
14        onStart: function (evt) {
15            // Add the no-select class to the container to disable text selection
16            document.getElementById(id).classList.add('no-select');
17        },
18
19        // Element dragging ended
20        onEnd: function (event) {
21            // Remove the no-select class to re-enable text selection
22            document.getElementById(id).classList.remove('no-select');
23        },
24        onUpdate: async (event) => {
25            // Notify .NET to update its model and re-render
26            await component.invokeMethodAsync(
27                'OnDraggedJS',
28                event.oldDraggableIndex,
29                event.newDraggableIndex
30            );
31            
32            // Revert the DOM to match the .NET state
33            event.item.remove();
34            event.to.insertBefore(event.item, event.to.children[event.oldIndex]);
35
36
37        }
38    });
39}
40
41window.setupTrashDropzone = function (id, group, dotnetRef) {
42    const trashzone = document.getElementById(id);
43
44    // Configure trashzone
45    new Sortable(trashzone, {
46        group: {
47            name: group,
48            pull: false, put: true
49        },
50        animation: 200,
51        onAdd: function (evt) {
52            const index = evt.item.id.substring(evt.item.id.indexOf('-') + 1);
53            // Call the .NET method to remove from data model
54            dotnetRef.invokeMethodAsync('RemoveDraggedPiece', index);
55        }
56    });
57};
58
59window.formulaDragInit = function (id, group, pull, put, sort, handle, filter, component, forceFallback) {
60    var sortable = new Sortable(document.getElementById(id), {
61        draggable: 'li',
62        animation: 200,
63        group: {
64            name: group,
65            pull: pull || true,
66            put: put
67        },
68        filter: filter || undefined,
69        sort: sort,
70        forceFallback: forceFallback,
71        handle: handle || undefined,
72        onStart: function (evt) {
73            // Add the no-select class to the container to disable text selection
74            document.getElementById(id).classList.add('no-select');
75        },
76
77        // Element dragging ended
78        onEnd: function (event) {
79            // Remove the no-select class to re-enable text selection
80            document.getElementById(id).classList.remove('no-select');
81        },
82        onUpdate: async (event) => {
83            // Revert the DOM to match the .NET state
84            event.item.remove();
85            event.to.insertBefore(event.item, event.to.children[event.oldIndex]);
86            const id = event.item.id.substring(event.item.id.indexOf('-') + 1);
87            // Notify .NET to update its model and re-render
88            await component.invokeMethodAsync(
89                'OnDraggedJS',
90                id,
91                event.oldDraggableIndex,
92                event.newDraggableIndex
93            );
94
95        }
96    });
97}