62

在 AngularJSjQuery.sortable中的元素上使用起来很容易吗？ng-repeat

如果重新排序项目会自动将该排序传播回源数组，那就太棒了。恐怕这两个系统会打架。有一个更好的方法吗？

4

5 回答 5

79

Angular UI 有一个可排序的指令，点击这里查看演示

代码位于ui-sortable，用法：

<ul ui-sortable ng-model="items" ui-sortable-update="sorted">
  <li ng-repeat="item in items track by $index" id="{{$index}}">{{ item }}</li>
</ul>

$scope.sorted = (event, ui) => { console.log(ui.item[0].getAttribute('id')) }
于 2012-08-12T16:50:22.110 回答
12

我尝试做同样的事情并提出了以下解决方案：

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()">

它似乎工作得很好。诀窍是在更新模型之前撤消 sortable 所做的 DOM 操作，否则 angular 会与 DOM 不同步。

更改通知通过可调用控制器方法的 my:onsort 表达式进行。

我创建了一个基于 angular todo 教程的 JsFiddle 来展示它是如何工作的：http: //jsfiddle.net/M8YnR/180/

于 2012-01-24T21:27:10.317 回答
10

这就是我使用 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();
            }
        });
    };
});
于 2012-02-17T16:09:38.280 回答
6

这是我对没有 jquery.ui 的可排序 Angular.js 指令的实现：

于 2014-05-10T15:14:29.947 回答
0

您可以选择轻量级且不使用 jquery 的 ng-sortable 指令。这是链接ng-sortable 拖放元素

ng-sortable 的演示

于 2016-02-01T07:29:15.447 回答