[AngularJS]制作jQuery UI Sortable directive演示

 [AngularJS]制作jQuery UI Sortable directive演示:

Htmld代码

<div jq-sortable="selectedList">   
   <div ng-repeat="item in selectedList">   
       <img ng-src="{{item.src}}" />   
   </div>   
</div>   

JavaScriptd代码

app.directive('jqSortable', ['$parse', function($parse) {   
   return function(scope, element, attrs) {   
       /*解析并取得表达式*/   
       var expr = $parse(attrs['jqSortable']);   
       var $oldChildren;   
   
       element.sortable({   
           opacity: 0.7,   
           scroll: false,   
           tolerance: "pointer",   
           start: function() {   
               /*纪录移动前的 children 顺序*/   
               $oldChildren = element.children('[ng-repeat]');   
           },   
           update: function(){   
               var newList = [];   
               var oldList = expr(scope);   
               var $children = element.children('[ng-repeat]');   
   
               /*产生新顺序的数组*/   
               $oldChildren.each(function(i){   
                   var index = $children.index(this);   
                   if(index == -1){ return; }   
   
                   newList[index] = oldList[i];   
               });   
   
               /*将新顺序的数组写回 scope 变量*/   
               expr.assign(scope, newList);   
   
               /*通知 scope 有异动发生*/   
               scope.$digest();   
           }   
       });   
   
       /*在 destroy 时解除 Sortable*/   
       scope.$on('$destroy', function(){   
           element.sortable('destroy');   
       });   
   };   
}]);