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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM