fatlinesofcode / ngDraggable

Drag and drop module for Angular JS
MIT License
631 stars 400 forks source link

ng-drag-move fires at all drop zones #204

Closed bortexz closed 1 year ago

bortexz commented 8 years ago

Hi!

I've been trying this library, and I have a little problem with this question.

What I want to achieve is reordering, BUT i want to make the reorder before you need to drop (So listening to ng-drag-move). I have the elements as the same drop zones. I've also tried to have the draggable element as a child of the drop zone.

My problem is, ng-drag-move fires for all of the drop-zones, instead of the one where the object is moving over. Is there a bug or the expected behaviour? If it's the last, then how you would achieve what a want to do? Is it possible with this library?

Thanks for help!

DmitriiSer commented 8 years ago

All you need is "ng-drag-enter" and "ng-drag-leave". But they are still waiting to be pulled from Add ng-drag-enter and ng-drag-leave attributes and events #141. Since it's been awhile when this pull request was created (Apr 21, 2015) I'd suggest to change your "ngDraggable.js" file by yourself with improvements from this commit and play with that. Now you don't need "ng-drag-move", just use "ng-drag-enter" with $index parameter and you'll always know what drop zone you are entering.

You could find the modified "ngDraggable.js" at my repo here.

And you could see how it works on a real example here.

NOTE: I have another issue: when I reorder the list of droppable elements while dragging an element through them it seems the position of draggable element under the cursor calculates relatively from the current position of the starting-droppable element. And since I reorder droppable elements on "ng-drag-enter" this starting-droppable element changes it's position in the list and it creates a weird position glitch. You could see it in my demo.
UPDATE1: The temporary solution is to comment "moveElement(_tx, _ty);" row in "ngDrag:onmove()". In this case you won't see any draggable element under the mouse cursor.
UPDATE2: Fixed by modifying "ngDraggable.js". "_dragOffset" variable should be in $rootScope to change it when reordering lists to proper "_tx/_ty" recalculations on "ng-drag-enter". Also function "moveElement" needs to be in "ngDrop" directive to immidiately move draggable-under-the-cursor element when reordering happened on ng-drag-enter.

Fully working example + modified "ngDraggable.js" on both desktop/mobile platforms.