easydiffusion/ui/plugins/ui/Modifiers-dnd.plugin.js

;(function() {
    "use strict"
    if (typeof editorModifierTagsList !== "object") {
        console.error("editorModifierTagsList missing...")
        return
    }

    const styleSheet = document.createElement("style")
    styleSheet.textContent = `
        .modifier-card-tiny.drag-sort-active {
            background: transparent;
            border: 2px dashed white;
            opacity:0.2;
        }
    `
    document.head.appendChild(styleSheet)

    // observe for changes in tag list
    const observer = new MutationObserver(function(mutations) {
        //    mutations.forEach(function (mutation) {
        if (editorModifierTagsList.childNodes.length > 0) {
            ModifierDragAndDrop(editorModifierTagsList)
        }
        //    })
    })

    observer.observe(editorModifierTagsList, {
        childList: true,
    })

    let current
    function ModifierDragAndDrop(target) {
        let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay")
        overlays.forEach((i) => {
            i.parentElement.draggable = true

            i.parentElement.ondragstart = (e) => {
                current = i
                i.parentElement.getElementsByClassName("modifier-card-image-overlay")[0].innerText = ""
                i.parentElement.draggable = true
                i.parentElement.classList.add("drag-sort-active")
                for (let item of document
                    .querySelector("#editor-inputs-tags-list")
                    .getElementsByClassName("modifier-card-image-overlay")) {
                    if (
                        item.parentElement.parentElement.getElementsByClassName("modifier-card-overlay")[0] != current
                    ) {
                        item.parentElement.parentElement.getElementsByClassName(
                            "modifier-card-image-overlay"
                        )[0].style.opacity = 0
                        if (item.parentElement.getElementsByClassName("modifier-card-image").length > 0) {
                            item.parentElement.getElementsByClassName("modifier-card-image")[0].style.filter = "none"
                        }
                        item.parentElement.parentElement.style.transform = "none"
                        item.parentElement.parentElement.style.boxShadow = "none"
                    }
                    item.innerText = ""
                }
            }

            i.ondragenter = (e) => {
                e.preventDefault()
                if (i != current) {
                    let currentPos = 0,
                        droppedPos = 0
                    for (let it = 0; it < overlays.length; it++) {
                        if (current == overlays[it]) {
                            currentPos = it
                        }
                        if (i == overlays[it]) {
                            droppedPos = it
                        }
                    }

                    if (i.parentElement != current.parentElement) {
                        let currentPos = 0,
                            droppedPos = 0
                        for (let it = 0; it < overlays.length; it++) {
                            if (current == overlays[it]) {
                                currentPos = it
                            }
                            if (i == overlays[it]) {
                                droppedPos = it
                            }
                        }
                        if (currentPos < droppedPos) {
                            current = i.parentElement.parentNode
                                .insertBefore(current.parentElement, i.parentElement.nextSibling)
                                .getElementsByClassName("modifier-card-overlay")[0]
                        } else {
                            current = i.parentElement.parentNode
                                .insertBefore(current.parentElement, i.parentElement)
                                .getElementsByClassName("modifier-card-overlay")[0]
                        }
                        // update activeTags
                        const tag = activeTags.splice(currentPos, 1)
                        activeTags.splice(droppedPos, 0, tag[0])
                        document.dispatchEvent(new Event("refreshImageModifiers"))
                    }
                }
            }

            i.ondragover = (e) => {
                e.preventDefault()
            }

            i.parentElement.ondragend = (e) => {
                i.parentElement.classList.remove("drag-sort-active")
                for (let item of document
                    .querySelector("#editor-inputs-tags-list")
                    .getElementsByClassName("modifier-card-image-overlay")) {
                    item.style.opacity = ""
                    item.innerText = "-"
                }
            }
        })
    }
})()