angular-ui-sortable实现可拖拽排序列表


Posted in Javascript onDecember 28, 2016

项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个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>

效果:

angular-ui-sortable实现可拖拽排序列表

我又另外添加了数据排序功能,不能直接使用orderBy筛选器,这样每次移动都会重新排序,需要使用orderByFilter和$watchCollection来实现效果,具体可查看地址:https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 #Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 #Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 #Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 #Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 #Javascript
BootStrap Tooltip插件源码解析
Dec 27 #Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 #Javascript
You might like
php使用ereg验证文件上传的方法
2014/12/16 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
pycharm快捷键汇总
2020/02/14 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python实现汇率转换操作
2020/05/03 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
欧克利英国官网:Oakley英国
2019/08/24 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
Android面试宝典
2013/08/06 面试题
行政人员工作职责
2013/12/05 职场文书
办公室文书岗位职责
2013/12/16 职场文书
医院保洁服务方案
2014/06/11 职场文书
植树节新闻稿
2015/07/17 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
MySQL注入基础练习
2021/05/30 MySQL
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang