FEAT: Introduced first version of Scrollable and DragAndDrop

src/component.js

@@ -31,6 +31,78 @@ class Component extends ScriptStoringComponent {
         this._toRegister.push(listName);
         return this;
     }
+
+    dragable() {
+        this.setAttribute("draggable", "true");
+        this.setAttribute("dropEffect", "none");
+        this.addStyleClass("comp-el-mech-draggable");
+
+        return this.addEventListener(
+            CommonEvents.DRAG_START,
+            (e) => {
+                console.log("DragEvent", e);
+                console.log("Attr", this._element.getAttribute("data-autocompel"));
+
+                e.dataTransfer
+                    .setData(
+                        "text/plain",
+                        this._element.getAttribute("data-autocompel")
+                    );
+            }
+        );
+
+    }
+
+    onDrop() {
+        this.onDragOver();
+        this.addStyleClass("comp-el-mech-drop");
+        return this.addEventListener(
+            CommonEvents.DROP,
+            (e) => {
+                e.preventDefault();
+                let draggedKey = e.dataTransfer.getData("text");
+                let draggedElement = document.querySelector(`[data-autocompel="${draggedKey}"]`);
+
+                let target = e.target
+                    .closest('.comp-el-mech-drop');
+                    
+                if (![...target.childNodes].includes(draggedElement)) {
+                    target
+                        .appendChild(draggedElement);
+                }
+            }
+        );
+    }
+
+    onDragOver() {
+        this.addStyleClass("comp-el-mech-dragover");
+
+        return this.addEventListener(
+            CommonEvents.DRAG_OVER,
+            (e) => {
+                e.preventDefault();
+            }
+        );
+    }
+
+    overflow(vertical = true, horizontal = false) {
+        if (vertical) {
+            this.modifier(
+                new Modifier()
+                    .setStyleRule("overflow-y", "auto")
+            );
+        }
+        if (horizontal) {
+            this.modifier(
+                new Modifier()
+                    .setStyleRule("overflow-x", "auto")
+            );
+        }
+        return this;
+    }
+
+
+
     /**
      * @override
      * @class Component