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 跨域访问问题解决方法
Dec 02 Javascript
javascript 解析url的search方法
Feb 09 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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在线生成二维码代码(google api)
2013/06/03 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
js版本A*寻路算法
2006/12/22 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
ES6 十大特性简介
2020/12/09 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python基础 range的用法解析
2019/08/23 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
大学军训感言
2014/01/10 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
高一军训感想
2015/08/07 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
pandas中DataFrame重置索引的几种方法
2021/05/24 Python