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 代表了可以進行拖拽的按鈕；

示例展示：