vuedraggable实现不同列表之间的拖拽

项目需要做到图片拖拽的效果，找到了这个组件，送上 GitHub 地址，并且记录如下。

想要的效果是能做到同级拖拽（排序）以及跨层拖拽（从一个列表到另一个列表）。

---

1、需要安装依赖

npm install vuedraggable --save

如果不行，可以借助淘宝镜像，用cnpm install vuedraggable --save

2、引入依赖
在需要的文件夹下引入import draggable from "vuedraggable";

3、调用组件

components: {
    // 调用组件
    draggable,
},

4、使用组件

<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 上写，很多效果都不能实现。

---

最简单的效果就有了，动画就要根据各自的需求去探索了。