捕获拖放事件

Question

我使用angular-ui来获得一个可以用拖放排序的列表，它工作得很好。

就像这样(很好):

index . html

<ul ui-sortable ng-model="list">
    <li ng-repeat="item in list" class="item">{{item}}</li>
</ul>

app.js

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

现在，我需要知道何时列表(它可能是很多具有此行为的列表)被改变，我尝试了drop, dropend, drag, ...，但没有得到它。

这里我的代码http://jsfiddle.net/9sueU/4/

我需要它的工作与多个列表像这里http://jsfiddle.net/b5nqd/1/

Answer 1

排序列表时，angular-ui会直接改变数组的顺序。您可以使用$scope.$watch来侦听list数组的更改事件。

$scope.$watch("list", function (value) {
    console.log("Changed !", value);
}, true);

你需要传递第三个参数true来强制Angular用angular.equals而不是一个基本的引用等式来验证更改。实际上，数组引用没有改变，它仍然是同一个数组，但是它的内容被修改了，所以只有angular.equals可以区分两者。

Answer 2

您需要观察集合的变化。即使顺序改变了，Angular也会通知你

$scope.$watchCollection('list', function (newVal, oldVal) {
    // DO something
});

我已经在这里更新了你的小提琴