marceljuenemann / angular-drag-and-drop-lists

Angular directives for sorting nested lists using the HTML5 Drag & Drop API
MIT License
2.16k stars 713 forks source link

Feature/prevent ui flicker on dragstart #379

Open nathanbedford opened 7 years ago

nathanbedford commented 7 years ago

If you use a drag and drop method that has the dndDraggingSource class removing the dragging source (such as this demo http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested) you might notice that, on old browsers, you'll see a flicker on drag start. In my own testing the list had to be 10+ items to notice it.

What we're seeing is the removal of the source item from the visible DOM (when 'dndDraggingSource' is applied) in one tick, and then the placeholder being added to the list in a future tick.

This PR changes makes it so as long as the item is in a dnd-list, the 'dndDraggingSource' class isn't applied until the placeholder is inserted, thus eliminating the UI flicker.

FYI this is especially noticeable on mobile devices.