转自：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
 
 
<div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content"> li ng-drag=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.拖拽排序示例

页面代码

  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
 
 
//数据
$scope.content = [{'name':'张春玲','age':28},{'王晰',102); box-sizing: border-box;">26},0); box-sizing: border-box;">'吴正青',102); box-sizing: border-box;">66}];

/** 拖拽成功触发方法 * index 拖拽后落下时的元素的序号（下标） * obj被拖动数据对象 */
$scope.dropComplete = function(index,obj){
        //重新排序
        var idx = $scope.content.indexOf(obj);             
        $scope.content.splice(idx,1);
        $scope.content.splice(index,102); box-sizing: border-box;">0,obj);   

};
 
 4.拖拽交换示例
 
 JS代码
 
//数据
$scope.content = [{66}];

/** 拖拽成功触发方法 * index 拖拽后落下时的元素的序号（下标） * obj 被拖动数据对象 */
$scope.dropComplete = function(index,obj){
        var idx = $scope.content.indexOf(obj); 
        $scope.content[idx] = $scope.content[index];
        $scope.content[index] = obj;           
};
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!