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