Angular directives to enable drag and drop sorting. Works on touch devices. Utilises

Module License: MIT

Added by: Sam Deering





Stars: 9

Watchers: 9

Forks: 2

Module Description



Angular directive to enable drag and drop sorting for ng-repeat. Works on touch devices. Utilises


Clone files from github or install with bower

bower install --save dominicenglish/ng-sortable

Include the Sortable script as well as the ng-sortable script

<script src='/bower_components/Sortable/Sortable.js'></script>
<script src='/bower_components/ng-sortable/ng-sortable.js'></script>

Add ng-sortable as an angular dependency

angular.module('myApp', ['']);


Two basic steps:

  • Add the ng-sortable directive to the list parent element and assign it the array you plan to loop over.
  • Add an ng-sortable-item-selector attribute to the list parent and provide a selector for your child elements.
<div class="list-container" ng-sortable="items" ng-sortable-item-selector=".list-item">
    <div class="list-item" ng-repeat="item in items">{{item}}</div>

There is an optional ng-sortable-on-change method that will be run after a change in order has been completed.

<div class="list-container" ng-sortable="items" ng-sortable-item-selector=".list-item" ng-sortable-on-change="myOnChangeMethod()">
    <div class="list-item" ng-repeat="item in items">{{item}}</div>

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!