透過 Vue.Draggable 來做資料搬移

我們這次來試試看簡單的資料搬移，資料在同一個 list 裡面我們可以如何透過 Draggable 來把資料移動到別的位置。

我們先在 data 裡面新增一個 list 來當作我們的資料

//在 data 資料裡面新增一個 list
list:[{name:"Lucy"}, 
        {name:"Amy"}, 
        {name:"Lucien"} ]
},

再來看看我們這次的主角需要在 id = "myApp" 裡面加入以下標籤

//以下 draggable 是可以拖移的一個 component 那使用的時候需要把所要拖移的標籤放到 draggable 裡面。
<h2>可以移動</h2>
<draggable :list="list" class="dragArea">
    <div v-for="element in list">{{element.name}}</div>
</draggable>

//看一下有沒有同步
<h2>不能移動使用 v-for 顯示出list</h2>
<div class="dragArea">
    ·<div v-for="element in list">{{element.name}}</div>
</div>

趕快試試看吧！可以移動的資料