# Drag'n'Drop - a drag handle element

**URL:** <https://discuss.prosemirror.net/t/dragndrop-a-drag-handle-element/4563>\
**Category:** Uncategorized\
**Created:** [April 20, 2022, 12:47pm UTC](https://discuss.prosemirror.net/t/dragndrop-a-drag-handle-element/4563 "2022-04-20T12:47:05Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [April 22, 2022, 12:38pm UTC](https://discuss.prosemirror.net/t/dragndrop-a-drag-handle-element/4563/2 "2022-04-22T12:38:38Z")

</div>

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):

```javascript
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"))
  }
}

```

---

_[View the full topic](https://discuss.prosemirror.net/t/dragndrop-a-drag-handle-element/4563)._