500-Lines-or-Less/1 - Blockcode/resources/js/ui.js

const setupMenuBlocks = () => {
    for (const [key, value] of Object.entries(ScriptElms)) {
        customElements.define(key, value);
        const elm       = document.createElement(key);
        elm.className   = "script-block";
        elm.draggable   = true
        elm.ondragstart = dragStartHandler
        menu.append(elm);
    }
}

const setupDragAndDrop = () => {
    script.ondrop     = dragDropHandler
    script.ondragover = dragOverHandler
    header.ondrop     = dragDropHandler
    header.ondragover = dragOverHandler

    const flexParents = document.getElementsByClassName("flex-parent");
    for (let i = 0; i < flexParents.length; i++) {
        flexParents[i].ondrop     = dragDropHandler
        flexParents[i].ondragover = dragOverHandler
    }
}

const dragStartHandler = (eve) => {
    draggedElm = eve.target;
    console.debug("Node: ", draggedElm);
    eve.dataTransfer.setData("text", eve.target.tagName.toLowerCase());
}

const dragOverHandler = (eve) => { eve.preventDefault(); }

const dragDropHandler = (eve) => {
    eve.preventDefault();
    eve.stopPropagation();

    const tagTarget = eve.currentTarget;

    if (
        eve.currentTarget.id.toLowerCase() === "header"     ||
        eve.currentTarget.classList.contains("flex-parent")
    ) {
        if ( draggedElm.parentNode.id.toLowerCase() !== "menu" ) {
            destroyScriptBlock(draggedElm, tagTarget);
        }

        return;
    }

    addBlockToScript(draggedElm, tagTarget);
}

const addBlockToScript = (draggedTarget, tagTarget) => {
    const elm = draggedTarget.cloneNode(true);
    elm.ondragstart = dragStartHandler
    tagTarget.appendChild(elm);
}

const destroyScriptBlock = (draggedTarget, tagTarget) => {
    draggedTarget.remove();
}