在本文中，我们将深入探讨如何使用AngularJS的第三方插件angular-ui-sortable实现可拖拽排序列表。这个插件允许用户通过简单的拖放操作来调整列表项的顺序，极大地提升了用户体验。我们需要了解该插件的基本依赖，即jQuery和jQuery UI库，这些库提供了基本的拖放功能。
在开始使用angular-ui-sortable之前，确保在HTML文件中引入了以下库：
```html
<script src="../../jquery.js"></script>
<script src="../../jquery-ui.js"></script>
<script src="../../angular.js"></script>
<script src="ui-sortable/src/sortable.js"></script>
```
接下来，我们需要创建一个AngularJS应用，并在其中注册一个控制器。在这个例子中，我们创建了一个名为"app"的应用和一个名为"sortCtrl"的控制器：
```javascript
angular.module("app", ["ui.sortable"])
.controller("sortCtrl", function($scope, $timeout) {
// ...
});
```
在控制器中，我们初始化一个数据数组`$scope.data`，包含一些对象，每个对象都有一个唯一的标识符（如`i`），以及用户可识别的信息（如`name`和`age`）：
```javascript
$scope.data = [
{ name: "allen", age: 21, i: 0 },
{ name: "bob", age: 18, i: 1 },
{ name: "curry", age: 25, i: 2 },
{ name: "david", age: 30, i: 3 }
];
```
然后，我们定义一个`sortableOptions`对象，它包含了与拖放排序相关的配置。`update`事件会在排序完成后触发，我们可以在这个事件中获取到新的排序顺序。由于可能存在一些延迟，我们需要使用`$timeout`服务来确保在正确的时刻获取到最新的数据顺序：
```javascript
$scope.sortableOptions = {
update: function(e, ui) {
$timeout(function() {
var resArr = [];
for (var i = 0; i < $scope.data.length; i++) {
resArr.push($scope.data[i].i);
}
console.log(resArr);
})
},
stop: function(e, ui) {
// 可以在此处理其他拖放结束时的逻辑
}
};
```
在HTML模板中，我们使用`<ul>`和`<li>`元素配合`ng-repeat`指令来显示数据，并使用`ui-sortable`指令启用拖放排序功能：
```html
<body>
<div ng-controller="sortCtrl">
<ul ui-sortable="sortableOptions" ng-model="data">
<li ng-repeat="item in data">
<span>{{item.name}}, {{item.age}}</span>
</li>
</ul>
</div>
</body>
```
这里，`ng-model`绑定到`$scope.data`，确保在拖放操作后数据模型与视图保持同步。
此外，文章提到了添加数据排序功能。如果想在拖放后根据特定规则（如年龄或名字）对列表进行排序，不能直接使用AngularJS的`orderBy`过滤器，因为它会在每次拖动后重新排序。为了避免这种情况，可以使用自定义的`orderByFilter`和`$watchCollection`来监听数据的变化并按需进行排序。
总结来说，angular-ui-sortable插件为AngularJS应用提供了一种简单易用的拖拽排序功能。通过结合使用`ng-model`、`ui-sortable`指令和相应的事件处理器，我们可以轻松地实现动态更新和排序列表。同时，对于更复杂的排序需求，可以借助自定义过滤器和数据监听来实现。通过这个插件，开发者能够创建更加直观和交互性强的Web应用程序。
