Drag & Drop Widget Decorator

v6
1

I went through the docs, the forum and couldn’t find the answer. I am trying to implement a Drag&Drop feature for Widget Decorations.

I have made the widget dom draggable and set the dropCursor extension in my cm configuration. My approach would to read the dropped cursor effect that the dropCursor dispatches and use that to move my widget, but two issues arise:

  1. The drop event is not triggered on the editor when I drag and drop the widget to a new position. That does happen when doing so with a normal text.
  2. Even if I manage to listen to this event, I would need to read the transaction effect from cursorDrop and I don’t see how.

In short, I want to drag a widget and when dropped read the cursorDrop anchor position, then dispatch the widget update.

PD: I know how time consuming is maintaing such a project and I really appreciated it.

2

Are you adding a dragStart event handler that sets the clipboard content for the drag? Or is this a widget that replaces some text and you want to have that text be what’s dragged?

3

It’s a Widget that replaces some text and I want to drag the resulting dom. So far dragging the widget is not a problem, but dropping it and making sense of it after.

4

You can add a dragstart handler on the widget, and do event.dataTransfer.setData("text/plain", ...) in your handler to set the content. (dragstart doesn’t propagate, so the editor’s drag handler doesn’t even fire in this situation)

1 Like
6

@marijn I managed to make it work as you suggested, thanks, but the widget it being copied instead of moved. Meaning the decoration text is copied in the droped position duplicating the widget and I am wondering how to then remove the previous one or if there is something I am missing, again.

7

Looking at this more closely, it seems that dragstart does bubble, and there’s a better solution for this. With the patch below, you should be able to set up your widget so that its ignoreEvent method returns false for dragstart events, and the editor’s built-in implementation should ‘just work’ with drags of that widget.

8

@marijn The patch works perfect, thank you so much :smiling_face_with_three_hearts:

9

Hi @miljan @marijn Can you please help me with drag and drop of a div from outside the code mirror editor to inside of it. In built functions work fine with text but when a div is being dragged, drop event is not triggered.

Can you provide any sample code for me to understand better in codemirror/try or in a codesandebox as well.