Implement Drag-And-Drop component

package.json

@@ -30,6 +30,7 @@
 		"prisma": "^5.20.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^4.0.0",
+		"svelte-dnd-action": "^0.9.51",
 		"sveltekit-superforms": "^2.19.1",
 		"tailwindcss": "^3.4.9",
 		"typescript": "^5.0.0",

src/lib/components/Shared/DnD.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { dndzone } from 'svelte-dnd-action';
+    import type { Options, DndEvent, Item } from 'svelte-dnd-action';
+
+    export let items: any[];
+    export let updateNewItems: (newItems: any[]) => void;
+    export let onDrop: ((e: CustomEvent<DndEvent<Item>>) => void) | undefined = undefined;
+    export let containerTag: string = 'div';
+    export let dndOptions: Omit<Options<Item>, 'items'> = {};
+    dndOptions.type = dndOptions.type || crypto.randomUUID(); // By default DnD will have different types, to prevent dragging between DnD zones.
+
+    function handleDndConsider(e: CustomEvent<DndEvent<Item>>) {
+        updateNewItems(e.detail.items)
+    }
+    function handleDndFinalize(e: CustomEvent<DndEvent<Item>>) {
+        updateNewItems(e.detail.items)
+        onDrop && onDrop(e);
+    }
+</script>
+
+<svelte:element this="{containerTag}" use:dndzone="{{ ...dndOptions, items }}" on:consider="{handleDndConsider}" on:finalize="{handleDndFinalize}" {...$$restProps}>
+    <slot></slot>
+</svelte:element>