How to implement drag and drop for block node with pos

1

I have an editor like this

image
image3512×2624 411 KB

The operation I did is drag the h1 node to the second line, i.e. I want h1 to be the second line.

I’ve logged some pos info:

dragging node pos 1
drop on block node pos 18 node type paragraph

But I may be lack of some knowledge to implement it …

To provide more information for getting helped…

How do I get the "dragging node pos" ?

I use posAtDOM to get the h1’s pos

How do I get the "drop on block node pos" ?

I use prosemirror-utils method findParentNodeClosestToPos

findParentNodeClosestToPos need two params:

  1. a ResolvedPos
  2. a predicate function
  • For param 1: I saved a pos from the last hovered HTMLElement when dropping, used posAtCoords, the coords is from my mouse position.
  • For param 2: it is node => node.isBlock, which is quite simple
2

ProseMirror has built-in drag-and-drop future. For example, the horizontal line in the video is provided by prosemirror-dropcursor). Maybe you can find something useful in this package.

3

Sorry!, the dropcursor plugin he not handle drag and drop, but he just shows a visual indicator of where the dragged content will be dropped