angularjs 使用angular-sortable-view實現拖拽效果（包括拖動完成后的方法使用）

首先還是看效果圖吧，方便大家可以快速得知是否是自己需要的功能：(抱歉電腦還未安裝動圖軟件，先用.png)

 

 

如果上圖是你需要的功能效果圖，那么請往下看，我有寫出來例子哦~

使用這個插件有幾個好處，首先：

1.只需要額外引入一個依賴包。angular-sortable-view.js即可

2.

核心代碼：

    <div ng-controller="MyController as vm" class="background">
        <div sv-root sv-part="vm.items" class="sv-container">
            <div ng-repeat="item in vm.items" sv-element class="sv-cell">
                <div>
                    <div>name: {{item.name}}</div>
                    <div>value: {{item.age}}</div>
                </div>
                <span class="sv-handle" sv-handle>拖拽手柄</span>
            </div>
        </div>
        <hr/>
        <div class="show-data">
            {{vm.items}}
        </div>
    </div>

 

3.

一個重點常用的API

API:

sv-on-sort="foo($item, $partFrom, $partTo, $indexFrom, $indexTo)"

 

 

 本案例代碼：代碼傳送門：https://github.com/zhongqiulan/angular-sortable-view

注：有完整代碼哦

官方文檔，建議大家遇到瓶頸的時候無意識瀏覽瀏覽：

 

地址：

 https://github.com/kamilkp/angular-sortable-view