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

转自：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>

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.拖拽排序示例

页面代码

<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>

1
2
3
4
5
1
2
3
4
5

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);

};

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.拖拽交换示例

页面代码

<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>

1
2
3
4
5
1
2
3
4
5

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;
};