Drag items in an ng-repeat to reorder them
MIT License
Drag items in an ng-repeat to reorder them
$ bower install --save angular-drag-to-reorder
I wrote this for another small project, and I figured someone else might find it useful. It's probably far less stable than something like UI Sortable, but that has all kinds of dependencies. This just needs Angular.
There aren't many frills, but it seems to do the job in up-to-date browsers.
Add drag-to-reorder
alongside your ng-repeat
and specify the name of the collection.
<ul>
<li ng-repeat="item in list" drag-to-reorder="list"></li>
</ul>
And it should Just Work.
When dragging and dropping elements, some classes will be added to those elements, so you can style accordingly.
The element being dragged will have a dragging
class on it.
The element that is being hovered over by a dragged element will have a dropping
class. More specifically, you'll see a dropping-above
or dropping-below
class on there, depending on where the dragged element will end up after being dropped.
There's just one. When the list gets reordered, dragToReorder.reordered
will fire, passing you some relevant data.
$scope.$on('dragToReorder.reordered', function ($event, reordered) {
// The list being reordered
reordered.array
// The item that was relocated
reordered.item
// The initial index of that item
reordered.from
// The index where it ended up
reordered.to
});
Get your dependencies
$ npm install
And use gulp
to build, watch, and host the project.
$ gulp