moth

draggable.js

 1// jshint asi:true
 2
 3var dragSrcEl_
 4
 5function draggableHandleDragStart(e) {
 6  e.target.dataset.moveId = e.timeStamp.toString()
 7  e.dataTransfer.effectAllowed = 'move'
 8  e.dataTransfer.setData('text/plain', e.target.dataset.moveId)
 9
10  // this/e.target is the source node.
11  e.target.classList.add('moving')
12}
13
14function draggableHandleDragOver(e) {
15  if (e.target.attributes.draggable) {
16    e.preventDefault() // Allows us to drop.
17  }
18
19  e.dataTransfer.dropEffect = 'move'
20
21  return false
22}
23
24function draggableHandleDragEnter(e) {
25  let element = e.target
26  if (!element.classList) {
27    element = element.parentElement
28  }
29  element.classList.add('over')
30}
31
32function draggableHandleDragLeave(e) {
33  // this/e.target is previous target element.
34  let element = e.target
35  if (!element.classList) {
36    element = element.parentElement
37  }
38  element.classList.remove('over')
39}
40
41function draggableHandleDrop(e) {
42  // this/e.target is current target element.
43  e.preventDefault()
44  let tgt = e.target
45  let src = document.querySelector("[data-move-id=\"" + e.dataTransfer.getData("text/plain") + "\"]")
46
47  // Don't do anything if we're dropping on the same column we're dragging.
48  if (src == tgt) {
49    return false
50  }
51  
52  let tgtPrev = tgt.previousSibling
53  src.replaceWith(tgt)
54  tgtPrev.after(src)
55  
56  tgt.dispatchEvent(new InputEvent("input", {bubbles: true}))
57}
58
59function draggableHandleDragEnd(e) {
60  // this/e.target is the source node.
61  for (e of document.querySelectorAll("[draggable].over")) {
62    e.classList.remove("over")
63  }
64  for (e of document.querySelectorAll("[draggable].moving")) {
65    e.classList.remove("moving")
66  }
67}
68
69function sortableInit(event) {
70  for (let e of document.querySelectorAll("[draggable]")) {
71    e.addEventListener('dragstart', draggableHandleDragStart)
72    e.addEventListener('dragenter', draggableHandleDragEnter)
73    e.addEventListener('dragover', draggableHandleDragOver)
74    e.addEventListener('dragleave', draggableHandleDragLeave)
75    e.addEventListener('drop', draggableHandleDrop)
76    e.addEventListener('dragend', draggableHandleDragEnd)
77  }
78}
79
80if (document.readyState === "loading") {
81  document.addEventListener("DOMContentLoaded", sortableInit)
82} else {
83  sortableInit()
84}