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}];
$scope.dropComplete = function(index, obj){
var idx = $scope.content.indexOf(obj);
$scope.content[idx] = $scope.content[index];
$scope.content[index] = obj;
};