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 Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
Three.js学习之网格
Aug 10 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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数据库抽象层 PDO
2011/05/07 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
JS类的封装及实现代码
2009/12/02 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
axios简单实现小程序延时loading指示
2018/07/30 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
python网络编程实例简析
2014/09/26 Python
python魔法方法-自定义序列详解
2016/07/21 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
四年大学生活的个人自我评价
2013/12/11 职场文书
大学活动邀请函
2014/01/28 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
勤俭节约倡议书
2014/04/14 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers