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!