拖放sortingng：在AngularJS中重复？
在AngularJS的ng-repeat元素上使用jQuery.sortable很容易吗？
如果重新sorting项目自动传播到源数组sorting，这将是真棒。 恐怕这两个系统会打架。 有一个更好的方法吗？
Angular UI有一个可sorting的指令， 点击这里进行演示
代码位于ui-sortable ，用法：
<ul ui-sortable ng-model="items"> <li ng-repeat="item in items">{{ item }}</li> </ul>
我试图做到这一点，并提出了以下解决scheme：
angular.directive("my:sortable", function(expression, compiledElement){ return function(linkElement){ var scope = this; linkElement.sortable( { placeholder: "ui-state-highlight", opacity: 0.8, update: function(event, ui) { var model = scope.$tryEval(expression); var newModel = []; var items = []; linkElement.children().each(function() { var item = $(this); // get old item index var oldIndex = item.attr("ng:repeat-index"); if(oldIndex) { // new model in new order newModel.push(model[oldIndex]); // items in original order items[oldIndex] = item; // and remove item.detach(); } }); // restore original dom order, so angular does not get confused linkElement.append.apply(linkElement,items); // clear old list model.length = 0; // add elements in new order model.push.apply(model, newModel); // presto scope.$eval(); // Notify event handler var onSortExpression = linkElement.attr("my:onsort"); if(onSortExpression) { scope.$tryEval(onSortExpression, linkElement); } } }); }; });
像这样使用：
<ol id="todoList" my:sortable="todos" my:onsort="onSort()">
这似乎工作得很好。 诀窍是在更新模型之前撤销由可sorting的DOM操作，否则agular会从DOM中去除同步。
通知可以通过my：onsortexpression式来调用控制器方法。
我创build了一个基于angular度todo教程的JsFiddle来展示它是如何工作的： http : //jsfiddle.net/M8YnR/180/
这是我如何做angular度v0.10.6。 这是jsfiddle
angular.directive("my:sortable", function(expression, compiledElement){ // add my:sortable-index to children so we know the index in the model compiledElement.children().attr("my:sortable-index","{{$index}}"); return function(linkElement){ var scope = this; linkElement.sortable({ placeholder: "placeholder", opacity: 0.8, axis: "y", update: function(event, ui) { // get model var model = scope.$apply(expression); // remember its length var modelLength = model.length; // rember html nodes var items = []; // loop through items in new order linkElement.children().each(function(index) { var item = $(this); // get old item index var oldIndex = parseInt(item.attr("my:sortable-index"), 10); // add item to the end of model model.push(model[oldIndex]); if(item.attr("my:sortable-index")) { // items in original order to restore dom items[oldIndex] = item; // and remove item from dom item.detach(); } }); model.splice(0, modelLength); // restore original dom order, so angular does not get confused linkElement.append.apply(linkElement,items); // notify angular of the change scope.$digest(); } }); }; });
这里是我的不带jquery.ui的可sorting的Angular.js指令的实现：
你可以去ng-sortable轻量级指令，它不使用jquery。 这里是链接可分类的拖放元素
演示ng-sortable
