Vue2 使用 Vue.Draggable 套件快速製作可拖拉清單

使用 CDN:

    
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
    

最簡單 Array 資料拖拉

drag: 設定是否可以移動

    
<div id="app">
    <draggable v-model="list" group="myItem" @start="drag=true" @end="drag=false">
        <button v-for="element in list" :key="element.id">{{ element.name }}</button>
    </draggable>
</div>
    

    
const app = new Vue({
    el: '#app',
    data: {
        list: [
            {id: 1, name: 'Item 1'},
            {id: 2, name: 'Item 2'},
            {id: 3, name: 'Item 3'},
        ],
        drag: true,
    },
});
    
    

已經可以拖曳了，是不是很簡單?並且 list 的資料也都會及時變更!並且因為雙向綁定，若資料更新則畫面也會同步更新。

兩組 Array 資料拖拉

如果有兩個清單的資料要交互移動，則只要設定相同的 group 即可在兩個 Array 間移動資料

    
<div id="app">
    <draggable v-model="list" group="myItem" @start="drag=true" @end="drag=false">
        <button v-for="element in list" :key="element.id">{{ element.name }}</button>
    </draggable>
    <div style="height: 50px"></div>
    <draggable v-model="list2" group="myItem" @start="drag=true" @end="drag=false">
        <button v-for="element in list2" :key="element.id">{{ element.name }}</button>
    </draggable>
</div>
    

    
const app = new Vue({
    el: '#app',
    data: {
        list: [
            {id: 1, name: 'Item 1'},
            {id: 2, name: 'Item 2'},
            {id: 3, name: 'Item 3'},
        ],
        list2: [
            {id: 4, name: 'Item 4'},
            {id: 5, name: 'Item 5'},
            {id: 6, name: 'Item 6'},
        ],
        drag: true,
    },
});
    
    

動畫

目前已經有完整的功能了，但是畫面效果好像不太夠，可以使用官方提供的動畫效果:

    
<div id="app">
    <draggable v-bind="dragOptions" v-model="list" group="myItem" @start="drag=true" @end="drag=false">
        <button v-for="element in list" :key="element.id">{{ element.name }}</button>
    </draggable>
</div>
    

    
const app = new Vue({
    el: '#app',
    data: {
        list: [
            {id: 1, name: 'Item 1'},
            {id: 2, name: 'Item 2'},
            {id: 3, name: 'Item 3'},
        ],
        drag: true,
    },
    computed:{
        dragOptions() {
            return {
                animation: 300,
                group: "description",
                disabled: false,
                ghostClass: "ghost"
            };
        },
    },
});
    
    

參考資料：
Github - SortableJS/Vue.Draggable
官方範例