angular拖动插件——ng-drag、ng-drop
来源:互联网 发布:bzero windows 编辑:程序博客网 时间:2024/06/05 18:49
转自:http://blog.csdn.net/zcl_love_wx/article/details/51691631
1.相关地址:
插件下载:https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.js
data-drag形式没用过,但找到了两个相关链接
http://codef0rmer.github.io/angular-dragdrop/#!/#%2F
http://benohead.com/drag-drop-with-angularjs/
2.讲解
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
ng-drag : 表示该元素能够被拖动
ng-drag-data : 表示拖动元素时跟着被拖走的数据
ng-drop : 表示该元素内可放置被拖动的元素
ng-drop-success : 放置在ngd-drop所在元素里后触发,一般写事件.
ng-drop-success触发的dropComplete方法的参数说明:
$index : 表示拖动的数据所落的元素的下标
$data : 被拖动的数据对象
3.拖拽排序示例
页面代码
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
js代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
4.拖拽交换示例
页面代码
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
JS代码
阅读全文
8 0
- angular拖动插件——ng-drag、ng-drop
- 深究AngularJS——ng-drag、ng-drop
- Angular—ng-class
- 【Angular】Angular项目添加ng-bootstrap插件
- angular学习之——ng-show/ng-hide与ng-if的区
- Angular——迭代器ng-repeat
- angular——ng-bind,ng-cloak,ng-src,ng-href解决AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果
- 《我的Angular入坑记》——ng-options的使用
- web拖动Drag&Drop原理
- [前端] H5 drag drop 拖动
- 细说Angular ng-class
- angular--ng-options
- 细说Angular ng-class
- angular的ng-options
- 细说Angular ng-class
- angular ng-options
- 细说Angular ng-class
- angular checkbox ng-model
- 设计模式(Design Pattern)
- 检查某个二进制字符串是否等于十六进程表示的字符串
- 算法 tricks
- Netty用户指南为4. x
- 欢迎使用CSDN-markdown编辑器
- angular拖动插件——ng-drag、ng-drop
- jstl标签库-core库
- JS的Object.defineProperty
- Swift中的closure类型与func的关系
- 自定义Flume拦截器,并将收集的日志存储到Kafka中(案例)
- POJ2253---Frogger(最短路变形)
- 事务配置
- unix中shell 非一般变量$0 $n $* $@ $! $?的详解
- 一个神奇高效的工具-正则表达式(一)