FEAT: DragAndDrop in a basic implementation

join_js_files.sh

@@ -11,6 +11,7 @@ SIZE_SIDE="siding.js shapes.js border.js dimensions.js"
 CONTEXT="generalHelpers.js webTrinity.js extStore.js scriptAndStyleContext.js"
 PRE_ANCESTRY="commonEvents.js context.js"
 MODIFIERS_LIST="alignment.js arrangement.js modifier.js" 
+MODIFICATIONS_LIST="dragAndDrop.js"
 COMPONENT_ANCESTRY="wrapperComponent.js modifiableComponent.js addStyleAndFunctions.js"
 HIGHER_LIST="component.js baseComponents.js builder.js"
 
@@ -42,6 +43,12 @@ for i in $MODIFIERS_LIST; do
     cat $SRC/$i >> $TARGET
 done
 
+echo "/* # MODIFICATIONS_LIST # */" >> $TARGET
+for i in $MODIFICATIONS_LIST; do
+    echo "/* ## $i ## */" >> $TARGET
+    cat $SRC/modifications/$i >> $TARGET
+done
+
 echo "/* # COMPONENT_ANCESTRY # */" >> $TARGET
 for i in $COMPONENT_ANCESTRY; do
     echo "/* ## $i ## */" >> $TARGET

src/component.js

@@ -225,7 +225,72 @@ class Component extends StyleAndScriptStoringComponent {
         return this;
     }
 
+    /**
+     * 
+     * @param {*} dndGroup 
+     * @returns {Component}
+     */
+    draggable(dndGroup = null) {
+        let selector = this._element.getAttribute("data-autocompel");
+        return this.addStyleClass("comp-el-mech-draggable")
+            .setAttribute("draggable", "true")
+            .setAttribute("dropEffect", "none")
+            .addEventListener(
+                CommonEvents.DRAG_START,
+                function (event) {
+                    console.log("DragEvent", event, "on", selector);
+                    e.dataTransfer
+                        .setData(
+                            "text/plain",
+                            selector
+                        );
+                }
+            );
+    }
 
+    /**
+     * 
+     * @param {EventDrag} dragEvent 
+     * @param {Function} action 
+     */
+    onDrag(dragEvent, action) {
+        let selector = `comp-el-mech-drag${dragEvent}`;
+
+        return this.addEventListener(
+            dragEvent,
+            function (event) {
+                event.preventDefault();
+            }
+        );
+    }
+
+    /**
+     * 
+     * @param {*} dndGroup 
+     * @returns {Component}
+     */
+    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}"]`);
+
+                    let target = e.target
+                        .closest('.' + selector);
+
+                    if (![...target.childNodes].includes(draggedElement)) {
+                        target
+                            .appendChild(draggedElement);
+                    }
+                }
+            );
+    }
 
     /**
      * Defines how a child Component is to be appended.

src/modifications/dragAndDrop.js

@@ -0,0 +1,11 @@
+const EventDrag = Object.freeze({
+    OVER: "over",
+    START: "start",
+    END: "end",
+    ENTER: "enter",
+    LEAVE: "leave"
+});
+
+const DADGroups = Object.freeze({
+    DEFAULT: new DragAndDropGroup(),
+});