This directive allows you to sort array with drag & drop.

• JQuery
• JQueryUI
• AngularJS 1.0.x

Note for AngularJS 1.2 users: Use the separate branch angular1.2.

Load the script file: sortable.js in your application:

<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>

Add the sortable module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.sortable'])

Apply the directive to your form elements:

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

Note: ng-model is required, so that the directive knows which model to update.

All the jQueryUI Sortable options can be passed through the directive.

myAppModule.controller('MyController', function($scope) {
  $scope.items = ["One", "Two", "Three"];

  $scope.sortableOptions = {
    update: function(e, ui) { ... },
    axis: 'x'
  };
});

<ul ui-sortable="sortableOptions" ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

Inside the update callback, you can check the item that is dragged and cancel the sorting.

$scope.sortableOptions = {
  update: function(e, ui) {
    if (ui.item.scope().item == "can't be moved") {
      ui.item.parent().sortable('cancel');
    }
  }
};

Note: update occurs before any model/scope changes but after the DOM position has been updated. So ui.item.scope and the directive's ng-model, are equal to the scope before the drag start.