diff --git a/src/component.js b/src/component.js index 3a8ac56..640c677 100644 --- a/src/component.js +++ b/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