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

---

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