vuedraggable實現不一樣列表之間的拖拽

項目須要作到圖片拖拽的效果，找到了這個組件，送上GitHub地址，而且記錄以下。

想要的效果是能作到同級拖拽（排序）以及跨層拖拽（從一個列表到另外一個列表）。

---

一、須要安裝依賴

npm install vuedraggable --save

若是不行，能夠藉助淘寶鏡像，用cnpm install vuedraggable --save

二、引入依賴
在須要的文件夾下引入import draggable from "vuedraggable";

三、調用組件

components: {
    //調用組件
    draggable,
},

四、使用組件

<draggable v-model="list2" v-bind="dragOptions" tag="span">
    <transition-group>
         <div v-for="item in list1" :key="item.name">{{item.name}}</div>
    </transition-group>
</draggable>

版本2指出用v-bind代替本來的:options，用tag代替本來的element。
注：transition-group必須是draggable的下面一層，兩個必須緊挨着，否則拖拽的時候會出現整個數組被拖拽的現象，而不是單條數據；transition-group下面一層必須是v-for的內容，不能額外再加div；樣式效果最好在div上寫，不要在draggable和transition-group上寫，不少效果都不能實現。

---

最簡單的效果就有了，動畫就要根據各自的需求去探索了。