mirror of https://github.com/dirtbags/moth.git
76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
// jshint asi:true
|
|
|
|
var dragSrcEl_
|
|
|
|
function draggableHandleDragStart(e) {
|
|
e.target.dataset.moveId = e.timeStamp.toString()
|
|
e.dataTransfer.effectAllowed = 'move'
|
|
e.dataTransfer.setData('text/plain', e.target.dataset.moveId)
|
|
|
|
// this/e.target is the source node.
|
|
e.target.classList.add('moving')
|
|
}
|
|
|
|
function draggableHandleDragOver(e) {
|
|
if (e.target.attributes.draggable) {
|
|
e.preventDefault() // Allows us to drop.
|
|
}
|
|
|
|
e.dataTransfer.dropEffect = 'move'
|
|
|
|
return false
|
|
}
|
|
|
|
function draggableHandleDragEnter(e) {
|
|
e.target.classList.add('over')
|
|
}
|
|
|
|
function draggableHandleDragLeave(e) {
|
|
// this/e.target is previous target element.
|
|
e.target.classList.remove('over')
|
|
}
|
|
|
|
function draggableHandleDrop(e) {
|
|
// this/e.target is current target element.
|
|
let tgt = e.target
|
|
let src = document.querySelector("[data-move-id=\"" + e.dataTransfer.getData("text/plain") + "\"]")
|
|
|
|
// Don't do anything if we're dropping on the same column we're dragging.
|
|
if (src == tgt) {
|
|
return false
|
|
}
|
|
|
|
let tgtPrev = tgt.previousSibling
|
|
src.replaceWith(tgt)
|
|
tgtPrev.after(src)
|
|
|
|
tgt.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
|
}
|
|
|
|
function draggableHandleDragEnd(e) {
|
|
// this/e.target is the source node.
|
|
for (e of document.querySelectorAll("[draggable].over")) {
|
|
e.classList.remove("over")
|
|
}
|
|
for (e of document.querySelectorAll("[draggable].moving")) {
|
|
e.classList.remove("moving")
|
|
}
|
|
}
|
|
|
|
function sortableInit(event) {
|
|
for (let e of document.querySelectorAll("[draggable]")) {
|
|
e.addEventListener('dragstart', draggableHandleDragStart, false)
|
|
e.addEventListener('dragenter', draggableHandleDragEnter, false)
|
|
e.addEventListener('dragover', draggableHandleDragOver, false)
|
|
e.addEventListener('dragleave', draggableHandleDragLeave, false)
|
|
e.addEventListener('drop', draggableHandleDrop, false)
|
|
e.addEventListener('dragend', draggableHandleDragEnd, false)
|
|
}
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", sortableInit)
|
|
} else {
|
|
sortableInit()
|
|
}
|