ng-sortable-支持触屏的拖拽排序-CSDN博客

1.首先是到https://github.com/a5hik/ng-sortable/tree/master/dist下载所需的文件：ng-sortable.min.js,ng-sortable.css,ng-sortable.style.css，并引用在项目中；

2.注入sortable的依赖项:angular.module('xyzApp', ['as.sortable', '....']);

3.用法：

<ul data-ng-model="data.topicContentList" as-sortable="dragControlListeners">
　　<li class="setFontSize" ng-repeat="topicContent in data.topicContentList"
       style=" height:45px; list-style-type: none; cursor: move; clear: both; padding: 10px; margin-right: 20px;"
       as-sortable-item>
　　　　<div style="width: 30px; float: left;">
　　　　　　<i class="glyphicon glyphicon-move" as-sortable-item-handle></i>
　　　　</div>
　　</li>
</ul>

data.topicContentList是我们要显示的内容的数组列表；

dragControlListeners是一个排序函数：

$scope.dragControlListeners = {
    // triggered when item order is changed with in the same column (what happens here)
    orderChanged: function (event) {
　　　　// 排序操作
　　}
}

4.在控制器中还可以定义其他的回调函数：

$scope.dragControlListeners = {
    accept: function (sourceItemHandleScope, destSortableScope) {return boolean}//override to determine drag is allowed or not. default is true.
    itemMoved: function (event) {//Do what you want},
    orderChanged: function(event) {//Do what you want},
    containment: '#board'//optional param.
    clone: true //optional param for clone feature.
    allowDuplicates: false //optional param allows duplicates to be dropped.
};

$scope.dragControlListeners1 = {
        containment: '#board'//optional param.
        allowDuplicates: true //optional param allows duplicates to be dropped.
};

转载于:https://www.cnblogs.com/maoyazhi/p/5718421.html