AngularJS drag ‘n’ drop re-order in ngRepeat
EDIT I’ve just got a github up for this here: https://github.com/SimeonC/ngRepeatReorder. I’ve fixed some of the bugs in the code and updated it to run on the 1.2.x angularjs codebase.
I’ve been busy on some small projects that I’ve been doing recently and a little problem I’ve had to overcome is the difficulty of doing drag ‘n’ drop reorders in an ngRepeat.
After looking around the web I came up with the following solution:
See the Pen AngularJS ngRepeat Drag n Drop by SimeonC (@SimeonC) on CodePen
How It Works
In short this works by starting with the ngRepeat code in angular.js. Which in itself is complex as you have to also copy over a bunch of functions that it uses that are hidden elsewhere in the codebase. Then you add all the lovely complexity of moving elements around – I decided to simplify this by limiting the movement within the list bounds and only do vertical re-ordering. I animate this by fiddling with the margins – creating a gap where the ‘dragged’ element is going to drop into and then using +/- margins to position the dragging element correctly. Also we add in classes for display purposes.
The last hurdle I had to overcome is to modify the ngRepeat element before our modified ngRepeat compiles the element, I did this with a second directive that executes before the ngRepeat and adds the event tags onto the element.
Posted on August 27, 2013, in AngularJS, CoffeeScript, Javascript and tagged angular.js, codepen, Drag 'n' Drop, Drag and Drop, ngRepeat, reorder. Bookmark the permalink. 8 Comments.
Nice!
Any chance for a Bower package or GitHub hosting?
I could do, I’ll have a look into it sometime. Will take me a while till I can get around to it though. Admittedly this started off just as a demo and I didn’t think about making it an actual project.
Ok. No worries.
The ones I came by either came by with some nasty dep (jQuery UI, ugh) or didn’t work correctly. Yours seems to do this right. 🙂
Github is running! Also bower package under ngRepeatReorder.
Very cool! Thanks.
Any NuGet package for this?
Sorry no there isn’t, I had to google what NuGet is – I don’t run windows at all so this is probably not going to happen either.
Thanks!