dragstart and dragend fired twice

[be-ndee]

Hi,

I have the problem, that sometimes the dragging does not work. In my polyfill, I have a drag delay of 200ms.

polyfill({
    holdToDrag: 200
});

The problem mostly appears, when I hold to drag and start moving "exactly" at 200ms. In a timeline:

0ms - finger on the draggable element
100ms - finger still on the element
200ms - start moving finger

Then my draggable element flickers a short moment and keeps in the same position. What I noticed is this: I logged the dragstart and dragend events. When dragging works fine, both events are fired twice like this:

dragstart
dragend
dragstart
dragend

But when this problem occurs, the log looks like this:

dragstart
dragstart
dragend
dragend

I tried to listen on the events and stop the propagation for the first dragstart and dragend but I didn't find a solution.

Maybe this helps to find the problem and a solution. And hopefully you understand this, I thinks it's difficult to explain 😄

If you think this is not a problem of the mobile-drag-drop shim, just let me know. Could also be a problem of the ng2-dnd which I use in combination with mobile-drag-drop.

[reppners]

The easiest way to debug this might be to include the non-minified polyfill which contains console logging. Are you able to override the import to point to index.js? (Default file is index.min.js)

[be-ndee]

Yes. Here is the log, where it is not working:

dnd-poly: setup delayed dragstart..
dnd-poly: starting delayed drag..
dnd-poly: global touchstart
dnd-poly: setting up potential drag operation..
dnd-poly: starting drag and drop operation
dnd-poly: dispatching dragstart
dnd-poly: moving draggable..
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragenter
dnd-poly: dragenter default prevented
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: new immediate user selection is: [object HTMLDivElement]
dnd-poly: dispatching dragover
dnd-poly: dragover prevented.
dnd-poly: d'n'd iteration ended. current drag operation: move
dnd-poly: dispatching drag
dnd-poly: drag operation end detected with move
dnd-poly: dispatching drop
dnd-poly: dragimage snap back transition ended
dnd-poly: dispatching dragend
dnd-poly: cleanup

[reppners]

Sry it took so long to get back to you!

According to the logs no duplicate dispatch of dragstart/dragend happens. The logs look pretty clean, nothing suspicious. Maybe it's really a combination of the polyfill and ng2-dnd.

Can you reproduce this in a Plunkr or StackBlitz?

[davidqqq]

I am facing the same issue when testing on IPad IOS 12 safari. Work with IPhone though.

The touch on draggable element initiated drag start and drag end instantly and emitted MouseEvent. I assume Event is the correct response as it follows dnd-poly dragstart event dispatch. I am still investigating the cause and would greatly appreciate if you can show me some sensible directions.

The attached is the log:

[Log] dnd-poly: global touchstart
[Log] dnd-poly: setting up potential drag operation..
**[Log] Drag Start – MouseEvent {isTrusted: true, screenX: 45, screenY: 637, …}
MouseEvent {isTrusted: true, screenX: 45, screenY: 637, clientX: 45, clientY: 612, …}MouseEvent
[Log] Drag End – MouseEvent {isTrusted: true, screenX: 482, screenY: 339, …}
MouseEvent {isTrusted: true, screenX: 482, screenY: 339, clientX: 482, clientY: 314, …}MouseEvent**
[Log] dnd-poly: starting drag and drop operation
**[Log] dnd-poly: dispatching dragstart
[Log] Drag Start – Event {isTrusted: false, dataTransfer: DataTransfer, relatedTarget: null, …}
Event {isTrusted: false, dataTransfer: DataTransfer, relatedTarget: null, screenX: 438, screenY: 259, …}Event**
[Log] dnd-poly: moving draggable.. (x8)
[Log] dnd-poly: dispatching drag
[Log] dnd-poly: new immediate user selection is: [object HTMLDivElement]
[Log] dnd-poly: dispatching dragenter

UPDATE:
Thank God I vaguely remember something about native DnD support only in IPad from issues #127. After adding -webkit-user-drag:none; to my draggable, I no longer see such weird behaviour!

[reppners]

Thanks for sharing your finding! Maybe the issue creator is also using an iPad with native drag and drop support.

[be-ndee]

Adding -webkit-user-drag:none; also helps me. Thanks to @davidqqq !