:fist: Drag items in an ng-repeat to reorder them


Module License: MIT

Added by: Sam Deering





Stars: 9

Watchers: 9

Forks: 3

Module Description

Angular Drag to Reorder

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.

But how?

Add drag-to-reorder alongside your ng-repeat and specify the name of the collection.

  <li ng-repeat="item in list" drag-to-reorder="list"></li>

And it should Just Work™.

What else?


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

  // The item that was relocated

  // The initial index of that item

  // The index where it ended up




Get your dependencies

$ npm install

And use gulp to build, watch, and host the project.

$ gulp

Module stats last updated: 2015-06-28 11:03:46

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!