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