question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drag freezes when originally dragged element is removed from DOM

See original GitHub issue

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.

dnd-working

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.

dnd-iphone-bug

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:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:6

github_iconTop GitHub Comments

1reaction
reppnerscommented, Aug 17, 2019

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

1reaction
AtanasChachevcommented, Aug 16, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found