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 clearScriptNode = () => {
    for (const elm of script.children) {
        elm.remove();
    }
}

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

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