angular-ui-sortable实现可拖拽排序列表
程序员文章站
2022-05-12 13:30:07
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个angular的插件：angular-ui-sortable，项目地址：
需要在之前引入jquery，和jquery...
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个angular的插件：angular-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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 5.3 数据通路的功能和基本结构
下一篇： CAD中怎么绘制两扇推拉的窗户平面图?