Drag'n'Drop - a drag handle element

2

The easiest way to do this is to make your drag handle set a node selection around the node you want to drag on mousedown (make sure the node is selectable). Something like this (can leave out the contentDOM and contentEditable stuff if your node is a leaf node):

class MyNodeView {
  constructor(node, view, getPos) {
    this.dom = document.createElement("div");
    this.dom.style.cssText = "position: relative"
    this.drag = this.dom.appendChild(document.createElement("div"))
    this.drag.style.cssText = "border: 1px solid grey; width: 10px; height: 20px; position: absolute; left: -10px; cursor: grab"
    this.drag.contentEditable = false
    this.drag.onmousedown = e => {
      if (e.button == 0)
        view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, getPos())))
    }
    this.contentDOM = this.dom.appendChild(document.createElement("div"))
  }
}
1 Like