转自：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.讲解

<div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content"><li ng-drag="true" ng-drag-data="item" >姓名：{{item.name}}，年龄：{{item.age}}</li>
</div>

ng-drag : 表示该元素能够被拖动
ng-drag-data : 表示拖动元素时跟着被拖走的数据

ng-drop : 表示该元素内可放置被拖动的元素
ng-drop-success : 放置在ngd-drop所在元素里后触发，一般写事件.

ng-drop-success触发的dropComplete方法的参数说明：
$index : 表示拖动的数据所落的元素的下标
$data : 被拖动的数据对象

3.拖拽排序示例

页面代码

<div ng-drop="true" ng-drop-success="dropComplete($index,$data)" ng-repeat="item in content"><li ng-drag="true" ng-drag-data="item" >姓名：{{item.name}}，年龄：{{item.age}}</li>
</div>

js代码

//数据
$scope.content = [{'name':'张春玲','age':28},{'name':'王晰','age':26},{'name':'吴正青','age':66}];/** 拖拽成功触发方法
*   index 拖拽后落下时的元素的序号（下标）
*   obj被拖动数据对象
*/
$scope.dropComplete = function(index, obj){//重新排序var idx = $scope.content.indexOf(obj);             $scope.content.splice(idx,1);$scope.content.splice(index,0,obj);   };

4.拖拽交换示例

页面代码

<div ng-drop="true" ng-drop-success="dropComplete($index,$data)" ng-repeat="item in content"><li ng-drag="true" ng-drag-data="item" >姓名：{{item.name}}，年龄：{{item.age}}</li>
</div>

JS代码

//数据
$scope.content = [{'name':'张春玲','age':28},{'name':'王晰','age':26},{'name':'吴正青','age':66}];/** 拖拽成功触发方法
*   index 拖拽后落下时的元素的序号（下标）
*   obj 被拖动数据对象
*/
$scope.dropComplete = function(index, obj){var idx = $scope.content.indexOf(obj); $scope.content[idx] = $scope.content[index];$scope.content[index] = obj;
};

angular拖动插件——ng-drag、ng-drop相关推荐

Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
html item 左右滑动,拖动Html元素集合 Drag and Drop any item
拖动Html元素集合 Drag and Drop any item 更新时间:2006年12月22日 00:00:00 作者: li { MARGIN-BOTTOM: 10px } ul { MA ...
jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
jquery插件课程1 幻灯片.城市选择.日期时间选择.拖放.方向拖动插件一.总结一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...
VMVare中Ubuntu报错：Drag and drop is not supported
问题描述 VMVare中安装了VMVare tools的Ubuntu系统无法和win主机拖拽传输文件,并且报错:Drag and drop is not supported 解决方式安装: sudo ...
扩展了 jquery 的插件 easy drag (转载木野狐)
扩展了 jquery 的插件 easy drag jquery 实现拖动的插件,试了几个,interface 是一个,但是 bug 太多,代码又复杂不好修改,就放弃了. 今天找到了一个叫做 easyd ...
html5怎么设置drop,HTML5 拖放（Drag 和 Drop）
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 将 RUNOOB.COM 图标拖动到矩形框中. 拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标 ...
html拖放数据库字段,HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. #div1 {width:350px;height:70px;padding:10p ...
Android 用户界面---拖放（Drag and Drop）（二）
拖拽事件监听器和回调方法 View对象既可以用实现View.OnDragListener接口的拖放事件监听器,也可以用View对象的onDragEvent(DragEvent)回调方法来接收拖拽事件. ...
[Ext JS 4] 拖放[drag and drop]
定义拖放一个拖动操作,就是在某个页面元素上按下鼠标并移动.一个放下操作,就是在拖动动作之后放开鼠标.可以从下图来看: Ext JS 的Ext.dd 类中定义了基本的拖放操作. 拖放类的组织所有的拖 ...

angular拖动插件——ng-drag、ng-drop