Newbie question about draggable and absolute positioning

1

Hi all,

I’m working on a feature similar to a post-it note, where an editable node can be placed on top of other editable content. I would like the note to be draggable, and also positioned absolutely with respect to the editor window – ie. I don’t want it to move if the editor window’s contents are scrolled.

I’ve experimented with a couple of different things including toggling the “draggable” option to false and instead simulate dragging with a mousemove handler to physically make the item move pixel by pixel, but I’m wondering if there’s some built-in functionality that I’m missing. So far I’ve used the dino example to make a couple of other custom widgets and the footnote example to make editables that create a new EditorView when a “special” editable node is clicked, but I haven’t come across anything that shows a special node that isn’t attached to a particular spot in the editable document.

Is there a good way to do this?

2

No, this doesn’t sound like something where ProseMirror’s built-in drag behavior can help—that implements dragging and dropping content to change its position in the document, not adjusting some position attribute on the dragged node itself.

3

Hey billg i managed to do some dragging and resizing. Advised by marijn i had to create a custom NodeView in which i loaded a popular drag and resize lib. I wrapped the node content inside the draggable element and on drag end and resize end i dispatch a new transaction that set the cords and dimension attrs on my node. And it works like a charm :slight_smile:

4

Thanks, @tstoev, that sounds somewhat like how I planned to approach it originally, though I’d been getting confused about whether I needed a NodeView or EditorView inside the draggable object. I had planned to use jQuery UI’s DnD just because it’s what I know. Is that what you used, or is there something more compatible/less likely to interfere with other prosemirror goings on? Also, is there a way to make the change in the draggable’s state be somehow saved into the main editor’s history so things like undo work? (this isn’t a dealbreaker for me, but would be very cool)?

Thanks again!

5

Hey @billg i have a plugin where i declare all my custom NodeViews and pass them to the editor , like this.

nodeViews: {
        [RESIZE_DRAG]: (node: ProsemirrorNode, view: EditorView, getPos: any) => {
          return new DraggableBoxView(node, view, getPos)
        },
      },

In this case DraggableBoxView is implementing NodeView interface, inside the view im bootstraping interact.js on the given dom.

1 Like
6

Hi, can you share the plugin code how you are making the custom nodes draggable. It will be very helpful for me to implement it.

7

Hello zia, small correction its not a plugin but a NodeView. I PM you the code.

8

Thanks buddy for sharing the code.