Interferes with dragging within children

[jasonvarga]

Excuse the horrible title.

I'm using shopify/draggable to make a handful of tiptap editors reorderable. When I do that, the editors lose their drag and drop behavior.

This might be an issue on their end, but I'm posting this here too because maybe you can see something obvious that I'm doing wrong. Ref: https://github.com/ueberdosis/tiptap/issues/918

Here's a video of the issue: https://d.pr/v/AqYC6r You can see me successfully dragging and moving text in the first standalone editor, but failing in the second which is wrapped by sortable.

Here's a codesandbox with the issue: https://codesandbox.io/s/tiptap-prosemirror-draggable-issue-1f34o It's written in Vue, but the part where sortable is used is pretty straightforward.

• Library version: 1.0.0-beta.12
• Browsers: all
• Tech stack: Vue

[zjffun]

Seems to be caused by our preventing the default dragstart behavior.

https://github.com/Shopify/draggable/blob/1590e5de8bcb3b50b33fa46aef5462f9f8a896ae/src/Draggable/Sensors/MouseSensor/MouseSensor.js#L95

<div contenteditable id="foo">hello world</div>
<script>
    function preventNativeDragStart(e) {
        e.preventDefault();
    }
    foo.addEventListener('dragstart', preventNativeDragStart);
</script>

[jasonvarga]

I assume that's pretty necessary for draggable to work though?

Not suggesting this is a solution, but what if that mousedown handler returned early if the event target is within a contenteditable?

[zjffun]

Indeed. I think most people might want to prevent the native dragstart by default, such as dragging an input element. Therefore, I am trying to return early when the target isn't in handle or draggable elements.

Currently, temporary fixes can be made by stopPropagation, for example:

<div contenteditable id="foo">with out preventNativeDragStart</div>
<div>
    other content
    <input type="text" value="test1 test2">
</div>
<script>
    function preventNativeDragStart(e) {
        e.preventDefault();
    }
    document.addEventListener('dragstart', preventNativeDragStart);

    foo.addEventListener('dragstart', function (e) {
        e.stopPropagation();
    })
</script>

[jasonvarga]

Thanks for clarifying. This did fix the issue for me. I'm happy to close this, but you can reopen if you think it's a bug.

Appreciate the quick help!