Using 3rd party UI library with drag functionality

Hi,

I have been struggling to implement a drag functionality for lists using sortable.js https://github.com/SortableJS/Sortable. I am using the following NodeView. I have tried various things however none seem to work. I presume this has something to do with prosemirror interfering (although I can’t pinpoint where exactly - I have also used stopEvent)? What is the canonical way to implement this? Or is there some way to “suspend” prosemirror and handle the interaction/transactions by the nodeview - for example when a "li" item is clicked/dragged?

In the schema list_items are set as {draggable: true, selectable: true}

Implemented for ordered_list:

class SortView {
  constructor(node, view, getPos) {
    this.dom = document.createElement("ol")
    this.dom.src = node.attrs.src
    this.sortable = Sortable.create(this.dom)
    this.contentDOM = this.dom
  }

  stopEvent() { return true }
}

I have also tried, in addition, using NodeView with stopEvent() { return true } for list_item and paragraph but that also doesn’t work.

Any help is greatly appreciated

It is likely the library is directly manipulating the editor content DOM, and ProseMirror is noticing these mutations and re-syncing the DOM to its state.

I also noticed that the drag events don’t seem to fire on the “li” elements, only on the “ol”…any idea what may cause that?

I also tried adding ignoreMutation⁠(e) { return true } but that never gets called. I did notice only mousedown and mouseup events are fired. Any idea why drag events would not fire :confused: ?

ignoreMutation on a node view can only catch mutations inside that node view. This drag library is likely mutating the DOM outside of it. Similarly, I guess the drag DOM events aren’t being fired on the node itself, but on a parent.

ok understood, thank you for your replies