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

---

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