ng-sortable拖拽拉取效果

ng-sortable拖拽拉取效果demo地址：https://github.com/a5hik/ng-sortable

引入相关的js代码：bower install ng-sortable -save

引入js，引入css样式；

<script type="text/javascript" src="dist/ng-sortable.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.min.css">

<!-- OPTIONAL: default style -->
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.style.min.css">

 

引用module；

angular.module('xyzApp', ['as.sortable', '....']);

 

html代码：

<tbody data-ng-model="table.ListColumn" as-sortable=“dragControlListeners ”>
<tr ng-repeat="selectedColumn in table.ListColumn track by $index"
    ng-if="!$ctrl.displayMore && $index<4 || $ctrl.displayMore" as-sortable-item>
    <td class="text-center">
        <md-icon class="material-icons step icon-24-999"
                 ng-bind="' open_with'" as-sortable-item-handle>
        </md-icon>
    </td>
    <td>{{selectedColumn | columnTranslateFilter}}</td>
    <td><span ng-if="selectedColumn.IsPrimaryKey">{{'true' | translate}}</span></td>
    <td><span ng-if="selectedColumn.IsRequired">{{'true' | translate}}</span></td>
</tr>

js代码

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

html中主要是data-ng-model/as-sortable="dragControlListeners(该函数需要js中定义一下)"
三个属性：as-sortable 代表了可拖拽的内容区域，包裹整个需要拖拽的区域；
as-sortable-item 代表了可拖拽的内容，也就是可以拖拽的一行内容；
as-sortable-item-handle 代表了可以进行拖拽的按钮；

示例展示：