46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
// https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap
|
|
let selected = null;
|
|
let container = document.getElementById("topics-container")
|
|
|
|
function isBefore(el1, el2) {
|
|
let cur
|
|
if (el2.parentNode === el1.parentNode) {
|
|
for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
|
|
if (cur === el2) return true
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function dragOver(e) {
|
|
let target = e.target.closest(".draggable-topic")
|
|
|
|
if (!target || target === selected) {
|
|
return;
|
|
}
|
|
|
|
if (isBefore(selected, target)) {
|
|
container.insertBefore(selected, target)
|
|
} else {
|
|
container.insertBefore(selected, target.nextSibling)
|
|
}
|
|
}
|
|
|
|
function dragEnd() {
|
|
if (!selected) return;
|
|
|
|
selected.classList.remove("dragged")
|
|
selected = null;
|
|
for (let i = 0; i < container.childElementCount - 1; i++) {
|
|
let input = container.children[i].querySelector(".topic-input");
|
|
input.value = i + 1;
|
|
}
|
|
}
|
|
|
|
function dragStart(e) {
|
|
e.dataTransfer.effectAllowed = 'move'
|
|
e.dataTransfer.setData('text/plain', null)
|
|
selected = e.target
|
|
selected.classList.add("dragged")
|
|
}
|