angular-ui-sortable实现可拖拽排序列表
时间：2021-07-05 09:20:20|栏目：AngularJS|点击： 次
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个Angular的插件：angular-ui-sortable，项目地址：https://github.com/angular-ui/ui-sortable
需要在之前引入jquery，和jquery-ui，否则无法使用。
我们要做的事情，加载数据，拖拽排序并输出当前顺序：
js代码：
<script src="../../jquery.js"></script>
<script src="../../jquery-ui.js"></script>
<script src="../../angular.js"></script>
<script src="ui-sortable/src/sortable.js"></script>
<script>
angular.module("app", ["ui.sortable"])
.controller("sortCtrl", function($scope, $timeout) {
$scope.cannotSort = false;
$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
}];
$scope.sortableOptions = {
// 数据有变化
update: function(e, ui) {
console.log("update");
//需要使用延时方法，否则会输出原始数据的顺序，可能是BUG？
$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) {
//do nothing
}
}
})
</script>
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>
效果：
我又另外添加了数据排序功能，不能直接使用orderBy筛选器，这样每次移动都会重新排序，需要使用orderByFilter和$watchCollection来实现效果，具体可查看地址：https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list
栏 目：AngularJS
下一篇：Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
本文标题：angular-ui-sortable实现可拖拽排序列表
本文地址：http://www.codeinn.net/misctech/152842.html
