MediaWiki:Tierlist.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
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();
}
});