Drag freezes when originally dragged element is removed from DOM

[cibernox]

I observe this in iOS safari, as every other browser I support has native Drag & Drop.

This is how this works in desktop and chrome for android.

In safari I can use drag and drop to sort within the same list (drop-area) but if fails if I trans to drag from one area to another one.

If I inspect the logs, when the drag freezes I can see in the console some messages looping for ever. They don't stop, no matter what I do or where I click:

[Log] dnd-poly: d'n'd iteration ended. current drag operation: move (vendor.js, line 51807)
[Log] dnd-poly: dispatching drag (vendor.js, line 51514)
[Log] dnd-poly: new immediate user selection is: [object HTMLLIElement] (vendor.js, line 51761)
[Log] dnd-poly: dispatching dragover (vendor.js, line 51514)
[Log] dnd-poly: dragover prevented. (vendor.js, line 51803)
[Log] dnd-poly: d'n'd iteration ended. current drag operation: move (vendor.js, line 51807)
[Log] dnd-poly: dispatching drag (vendor.js, line 51514)
[Log] dnd-poly: new immediate user selection is: [object HTMLLIElement] (vendor.js, line 51761)
[Log] dnd-poly: dispatching dragover (vendor.js, line 51514)
[Log] dnd-poly: dragover prevented. (vendor.js, line 51803)
[Log] dnd-poly: d'n'd iteration ended. current drag operation: move (vendor.js, line 51807)
...

[reppners]

Hi and sorry for the long delay. Can you provide me a git repo or stackblitz/plunkr which reproduces the problem so I can take a look and play with it?

[AtanasChachev]

Hey @reppners I've created a simple demo where you can reproduce this issue. Steps to reproduce:

1. Open https://angular-jxj2v4.stackblitz.io from the mobile safari.
2. Start dragging some element named 'Initial_...' and enter the top div named '3ENTER HERE WITH ELEMENT WHO IS BEING DRAGGED'.

Expected behaviour : The elements are updated and the drag and drop can be used again.
Actual behaviour: The elements are updated but the dragged element 'freezes' and the drag and drop is disabled, If you try to drag and drop again, it won't work.

You can see the codebase here: https://stackblitz.com/edit/angular-jxj2v4

Would be great and helpful for the community if this one gets some solution.
Thanks in advance!

At all , when the view/data is being updated while dragging some element the element itself freezes and the drag in drop is being disabled.

[reppners]

Thanks for providing a reproduction, I'll try to track down the root cause.

[reppners]

I'm a bit uncertain on how to workaround this if even possible.

See

• https://docs.google.com/document/d/12-HPlSIF7-ISY8TQHtuQ3IqDi-isZVI0Yzv5zwl90VU/edit#heading=h.q2zqz8v0mja7
• touchmove doesn't fire on removed element facebook/react#1355

Edit: Chrome and Firefox show the same behaviour in mobile emulation mode.

[AtanasChachev]

Hey @reppners I found a workaround which fits my case. Instead of updating the existing elements (destroying the element that is being dragged), I've created 2 components with the same elements (second components is with the updated data elements which the dragged element from component 1 can be dropped onto them) and just toggling the visibility with [hidden] attribute. This way the dragged element is not being destroyed but instead hidden and everything works perfectly. Not the brightest solution but it works perfectly :)

[reppners]

Closing as non-actionable on the library level but workarounds can be made at application level 👍