使用angular-ui-sortable实现可拖拽排序列表
2018-11-14 20:16
1146 查看
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
我又另外添加了数据排序功能,不能直接使用orderBy筛选器,这样每次移动都会重新排序,需要使用orderByFilter和$watchCollection来实现效果,具体可查看地址:https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list
给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
阅读更多相关文章推荐
- 使用angular-ui-sortable实现可拖拽排序列表
- angular-ui-sortable实现可拖拽排序列表
- 使用sortable插件实现列表中表项的拖曳排序操作8-3
- 通过jquery-ui中的sortable来实现拖拽排序的简单实例
- 通过jquery-ui中的sortable来实现拖拽排序
- 使用sortable插件实现列表中表项的拖曳排序操作8-3
- 使用js开发列表的拖拽排序
- 基于modern ui for wpf的在线公开课平台 之五 使用ListBox实现图片列表效果
- iOS 使用UILocalizedIndexedCollation实现区域索引标题(Section Indexed Title)即拼音排序
- jquery sortable实现table拖拽排序,更新时只更新受影响的行
- python数据结构学习笔记-2016-10-24-02-使用排序列表实现集合ADT
- 使用 Jquery-UI 实现一次拖拽多个选中的元素操作
- 强大jQuery ui.ariaSorTable实现排序、分页的表格
- 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
- 使用UILocalizedIndexedCollation实现区域索引排序 及 不显示没有数据的区域
- jquery使用列表标签实现的可拖拽listbox
- asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序
- angular使用requirejs/ui-router/angularAMD实现动态加载模块
- 使用ItemTouchHelper轻松实现RecyclerView拖拽排序和滑动删除
- jQuery可拖拽排序列表jquery-sortable-lists