Newbie question about draggable and absolute positioning

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?

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.

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:

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!

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

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.

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

Thanks buddy for sharing the code.