search

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

using track by in ng-repeat will cause dnd-moved not to trigger #500

Open Mr-Skribbls opened 5 years ago

Mr-Skribbls commented 5 years ago

I made the mistake of using track by $index in ng-repeat. Like this: <script type="text/ng-template" id="list.html"> <ul dnd-list="list"> <li ng-repeat="item in list track by $index" dnd-draggable="item" dnd-effect-allowed="move" dnd-moved="list.splice($index, 1)" dnd-selected="models.selected = item" ng-class="{selected: models.selected === item}" ng-include="item.type + '.html'"> </li> </ul> </script> this causes dnd-moved to not trigger when you drag a bottom item up the list. Causing there to be duplicates. I reproduced this using the demo code.

warlockdn commented 5 years ago

Were you able to solve this ?

Mr-Skribbls commented 5 years ago

no I had to remove the track by for it to work

lorenzo-dd commented 5 years ago

I confirm that track by $index breaks the whole thing!!! It actually drags the item but the $index passed to the dragMoved callback is sometimes wrong, making you delete the wrong item and actually duplicating the one you just moved.