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

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=" 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