手动更新 Angular-UI UI-Sortable 项目

Question

基本上，我希望用户能够拖放项目或单击向上/向下箭头以移动列表中的项目。

有没有一种很好的方法来更新与 ui-sortable/angular-ui 配合得很好的项目索引？

谢谢。

更新

我们能够通过在控制器中添加一个函数来解决这个问题，该函数将从数组中删除项目并将其添加回大于或小于其原始位置的索引中。这是一个草率的例子：

$scope.upDown = function(oldIndex, newIndex) {
    var item = $scope.list[oldIndex];
    $scope.list.splice(oldIndex,1);
    $scope.list.splice(newIndex,0,item);
};

http://jsfiddle.net/69auq/1/

您需要检查它是数组中的第一个还是最后一个元素，以相应地禁用向上或向下。

Answer 1

我们能够通过在控制器中添加一个函数来解决这个问题，该函数将从数组中删除项目并将其添加回大于或小于其原始位置的索引中。这是一个草率的例子：

$scope.upDown = function(oldIndex, newIndex) {
    var item = $scope.list[oldIndex];
    $scope.list.splice(oldIndex,1);
    $scope.list.splice(newIndex,0,item);
};

http://jsfiddle.net/69auq/1/

您需要检查它是数组中的第一个还是最后一个元素，以相应地禁用向上或向下。

Answer 2

与所有 AngularJS 一样，答案是 "think in Angular, not jQuery"。

This CodePen 很好地说明了如何做到这一点。基本上，您有一个范围内的临时对象用于拖动，然后您将其推入 ng-repeat 的绑定数组。我不能把它归功于它（不是我的创造），但谷歌很快就把我引向了它。 CodePen 不使用任何外部依赖项，但正如您所见，这意味着比使用 Angular-UI 之类的东西要多一些工作。

这里的a JSFiddle 显示了相同的概念，但具有 Angular-UI 依赖项。使用 angular-ui 的好处是你的绑定数据数组只需要这样调用：

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

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

这意味着您的工作量会减少，因为它已经被弄清楚了。 AngularJS 很好地与 jQuery 配合使用，因此这不应该决定从 jQuery UI 的开发方法发生巨大转变，具体取决于您的用例。