Javascript 拖放可排序ng：在AngularJS中重复？

在AngularJS中的

ng repeat

元素上使用

jQuery.sortable

容易吗

---

---

如果重新排序项目会自动将排序传播回源数组，那将是非常棒的。但我担心这两种系统会发生冲突。有更好的方法吗？

我也尝试了同样的方法，并提出了以下解决方案：

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教程的基础上创建了一个JSFIDLE来展示它是如何工作的：

这就是我在angular v0.10.6中的工作方式。这是你的电话号码

---

Angular UI有一个可排序的指令

代码位于，用法：

---

下面是我在没有jquery.ui的情况下对sortable Angular.js指令的实现：

---

您可以使用轻量级的ng sortable指令，它不使用jquery。这里是链接

---

我最终只是使用了SlickGrid，但我相信你的话，这是可行的。这个解决方案需要注意的一点是，它很可能不会像v1.x那样工作。调整这一点应该不难，但我还没有来得及更新我的所有代码。@关于代码，您是否重新考虑了代码以使用最新的AngularJS版本（v1.0.1）？我一辈子都找不到1.0.1的可靠工作版本。@Greg我们现在使用Angular UI的UI Sortable，它工作得很好。是否有可能更新angular js当前版本的js FIDLE代码，即angular js 1.0.1。我尝试在JSFIDLE上运行这些示例，根据我的要求将angular js的版本更改为1.0.1，但随后代码中断，无法工作。“请帮忙。”谢谢！我同意。还寻找了1.0.1:-）的工作示例，发现了这一点，它在1.0.1中起作用-我创建了一个教程，介绍了如何与JQuery UI结合使用。使用单个指令非常容易。这里可以找到解释和示例：请注意，您应该将

ng model

添加到

ui:sortable

：

控制台中有错误吗？在我的chrome/Windows7中工作，您可以尝试更新libs（jquery/jqueryUI/angularUI）并查看它是否解决了您的问题……JSFIDLE示例似乎工作不可靠。没有错误，但订单间歇性地变得不同步。在firefox和chromeAny中尝试过如何在没有jQuery的情况下实现这一点？@Kugel您是否尝试过angular ui sortable的最新版本？以演示很快过时的速度：

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();
            }
        });
    };
});

<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')) }