MediaWiki:Tierlist.js

mw.loader.using('mediawiki.util').then(function () {

    console.log("✅ TierList.js loaded");

    function setupTierList() {

        let draggedItem = null;


        // Make items draggable
        document.querySelectorAll(".tier-item").forEach(function (item) {

            item.draggable = true;

            item.addEventListener("dragstart", function (e) {

                draggedItem = item;

                console.log("Dragging:", item.id);

                e.dataTransfer.effectAllowed = "move";
                e.dataTransfer.setData(
                    "text/plain",
                    item.id
                );

                item.style.opacity = "0.5";

            });


            item.addEventListener("dragend", function () {

                item.style.opacity = "1";

                draggedItem = null;

                console.log("Drag ended");

            });

        });



        // Setup drop zones
        document.querySelectorAll(".tier-items").forEach(function (container) {


            container.addEventListener("dragover", function (e) {

                e.preventDefault();

                e.dataTransfer.dropEffect = "move";

            });



            container.addEventListener("dragenter", function (e) {

                e.preventDefault();

                container.classList.add("tier-hover");

            });



            container.addEventListener("dragleave", function () {

                container.classList.remove("tier-hover");

            });



            container.addEventListener("drop", function (e) {

                e.preventDefault();

                container.classList.remove("tier-hover");


                let id = e.dataTransfer.getData("text/plain");

                let item = document.getElementById(id);


                console.log(
                    "Dropped:",
                    id,
                    "into",
                    container.id
                );


                if (item) {

                    container.appendChild(item);

                }

            });

        });

    }


    if (document.readyState === "loading") {

        document.addEventListener(
            "DOMContentLoaded",
            setupTierList
        );

    } else {

        setupTierList();

    }

});