drag

src/display.js

@@ -26,6 +26,29 @@ export class Display {
     const field = document.createElement('ul')
     field.className = 'items'
 
+    field.addEventListener('dragstart', e => {
+      let target = findA(e.target)
+      if (!target || !target.draggable) return
+      e.dataTransfer.setData('application/prs.x', target.dataset['id'])
+      e.dataTransfer.effectAllowed = 'link'
+    })
+    field.addEventListener('dragenter', e => {
+      let target = findA(e.target)
+      if (!target) return
+      e.preventDefault()
+    })
+    field.addEventListener('dragover', e => {
+      let target = findA(e.target)
+      if (!target) return
+      e.preventDefault()
+    })
+    field.addEventListener('drop', e => {
+      let target = findA(e.target)
+      if (!target) return
+      e.preventDefault()
+      dispatch({ action: 'link', from: e.dataTransfer.getData("application/prs.x"), to: target.dataset['id']})
+    })
+
     const graph = this.graph
     for (const item of state.items) {
       graph.addNode(new Springy.Node(item.id, item))