From 5e782912f79bd1c0bfaa001faa211e23ff3af85a Mon Sep 17 00:00:00 2001
From: chris <chris@denkblock.mas>
Date: Thu, 20 Feb 2025 00:09:50 +0100
Subject: [PATCH] FIX,FEAT: Drag and Drop basic implementation

---
 src/component.js                 | 35 +++++++++++++-------------------
 src/modifications/dragAndDrop.js | 13 ++++++++++++
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/component.js b/src/component.js
index 87eaa5a..be5aa95 100644
--- a/src/component.js
+++ b/src/component.js
@@ -258,14 +258,12 @@ class Component extends StyleAndScriptStoringComponent {
      * @param {EventDrag} dragEvent 
      * @param {Function} action 
      */
-    onDrag(dragEvent, action) {
+    onDrag(dragEvent, action = (e) => { e.preventDefault(); }) {
         let selector = `comp-el-mech-drag${dragEvent}`;
 
         return this.addEventListener(
-            dragEvent,
-            function (event) {
-                event.preventDefault();
-            }
+            'drag' + dragEvent,
+            action
         );
     }
 
@@ -276,25 +274,19 @@ class Component extends StyleAndScriptStoringComponent {
      */
     dropTarget(dndGroup = null) {
         let selector = "comp-el-mech-droptarget";
-        return this.onDrag(EventDrag.OVER)
-            .addStyleClass(selector)
-            .addEventListener(
-                CommonEvents.DROP,
-                function (event) {
-                    event.preventDefault();
 
-                    let draggedKey = event.dataTransfer.getData("text");
-                    let draggedElement = document.querySelector(`[data-autocompel="${draggedKey}"]`);
+        function dropEventCall(event) {
+            return dropEventHandler(event, selector);
+        }
 
-                    let target = e.target
-                        .closest('.' + selector);
+        this.addStyleClass(selector)
+            .onDrag(EventDrag.OVER);
 
-                    if (![...target.childNodes].includes(draggedElement)) {
-                        target
-                            .appendChild(draggedElement);
-                    }
-                }
-            );
+        this._element.addEventListener(
+            "drop",
+            dropEventCall
+        );
+        return this;
     }
 
     /**
@@ -577,6 +569,7 @@ class Component extends StyleAndScriptStoringComponent {
                 );
             }
         }
+
         if (this.#isCompel) {
             function dealCollected(map, extStoreType) {
                 if (map.has(extStoreType)) {
diff --git a/src/modifications/dragAndDrop.js b/src/modifications/dragAndDrop.js
index 315cc42..1ac64da 100644
--- a/src/modifications/dragAndDrop.js
+++ b/src/modifications/dragAndDrop.js
@@ -6,6 +6,19 @@ const EventDrag = Object.freeze({
     LEAVE: "leave"
 });
 
+function dropEventHandler(event, selector) {
+    event.preventDefault();
+
+    let draggedKey = event.dataTransfer.getData("text/html");
+    let draggedElement = document.querySelector(`[data-autocompel="${draggedKey}"]`);
+
+    let target = event.target
+        .closest('.' + selector);
+
+    //if (![...target.childNodes].includes(draggedElement)) {
+    target.appendChild(draggedElement);
+    //}
+}
 const DADGroups = Object.freeze({
     DEFAULT: new DragAndDropGroup(),
 });