Angular-UI Sortable Demo

by lucaslimax

HTML

<div ng-controller="controller">
    <ul ui-sortable ng-model="list">
        <li ng-repeat="item in list" class="item">{{item}}</li>
    </ul>
    <hr />
    <div ng-repeat="item in list">{{item}}</div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script>
    /*
 jQuery UI Sortable plugin wrapper

 @param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config
 */
angular.module('ui.sortable', [])
  .value('uiSortableConfig',{})
  .directive('uiSortable', [
    'uiSortableConfig', '$timeout', '$log',
    function(uiSortableConfig, $timeout, $log) {
      return {
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
          var savedNodes;

          function combineCallbacks(first,second){
            if(second && (typeof second === 'function')) {
              return function(e, ui) {
                first(e, ui);
                second(e, ui);
              };
            }
            return first;
          }

          function hasSortingHelper (element) {
            var helperOption = element.sortable('option','helper');
            return helperOption === 'clone' || typeof helperOption === 'function';
          }

          var opts = {};

          var callbacks = {
            receive: null,
            remove:null,
            start:null,
            stop:null,
            update:null
          };

          angular.extend(opts, uiSortableConfig);

          if (!angular.element.fn || !angular.element.fn.jquery) {
            $log.error('ui.sortable: jQuery should be included before AngularJS!');
            return;
          }

          if (ngModel) {

            // When we add or remove elements, we need the sortable to 'refresh'
           ...

JavaScript

var myapp = angular.module('myapp', ['ui.sortable']);

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);