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

页面代码

Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: "Source Code Pro",$data)"  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;           
};
 原文链接：https://www.f2er.com/angularjs/146979.html