Drag freezes when originally dragged element is removed from DOM
See original GitHub issueI 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)
...
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:6
Top Results From Across the Web
jQueryUI - Drag and Drop issue - dragged element goes ...
In my application I have another problem, in that when I drag an item out of the left side div, it vanishes though...
Read more >HTML5's Drag and Drop Problem - Inkling
This means that interface elements freeze, animations pause, and most (but not all) scrolling features are disabled during the drag. These ...
Read more >Drag & drop freezes under certain conditions (dragstart event ...
In our application the condition is you need to move the element that's being dragged a very small amount and then release it,...
Read more >ondragover Event - W3Schools
The ondragover event occurs when a draggable element or a text selection is being dragged over a valid drop target. By default, data/elements...
Read more >Javascript Drag and Drop Events Crash Course to ... - YouTube
Javascript Drag and Drop Events Crash Course to Drag & Drop Images inside Multiple DIV's Elements. 146 views Streamed 4 months ago.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks for providing a reproduction, I’ll try to track down the root cause.
Hey @reppners I’ve created a simple demo where you can reproduce this issue. Steps to reproduce:
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.