From 32ba105705b6ff0d35ad71659844b30bac0a2bfa Mon Sep 17 00:00:00 2001
From: glitchingcore <102431570+glitchingcore@users.noreply.github.com>
Date: Fri, 18 Oct 2024 20:31:44 +0200
Subject: [PATCH] Implement Drag-And-Drop component

---
 package.json                         |  1 +
 src/lib/components/Shared/DnD.svelte | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/lib/components/Shared/DnD.svelte

diff --git a/package.json b/package.json
index 95a5a27..9d8ed1a 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib/components/Shared/DnD.svelte b/src/lib/components/Shared/DnD.svelte
new file mode 100644
index 0000000..59021d4
--- /dev/null
+++ b/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>
\ No newline at end of file