1 vue cardDragger
使用方法：
① npm install carddragger
② main.js 文件：
import {installCardDragger} from 'carddragger'
Vue.use(installCardDragger)
③ 使用页面：
import { cardDragger } from 'carddragger'
export default {
components:{
cardDragger,
}
}
<cardDragger :data="cardList" :colNum="4" :cardOutsideWidth="300" :cardInsideWidth="260" :cardOutsideHeight="310" :cardInsideHeight="240" > </cardDragger>
详细参考cardDragger使用文档
注:可实现拖拽功能，且内部组件支持自定义内容，也提供了相关方法；但无法给出拖拽后的排序列表list,只能根据拖拽前后的索引自行排序；
2 vuedraggable
参考链接 vue draggable 与 vue-dragging
使用方法：
① npm i vuedraggable -S
② 使用页面：
import vuedraggable from 'vuedraggable';
export default {
components:{
draggable
}，
methods:{
datadragEnd(){
console.log(this.myArray);
}
}
},
<vuedraggable v-model="myArray" draggable=".item" @update="datadragEnd" :options = "{animation:800}">
<transition-group>
<div v-for="item in list":key="item"class="item">
<p>{{item}}</p>
</div>
</transition-group>
</vuedraggable>
注：update相关方法调用后list会自行更新;并支持过渡动画，并可以手动配置；
3 vue-dragging
vue-dragging是通过在元素上添加指令实现拖拽的，在mounted时监听拖拽结束获取拖拽后数据，且list会自动更新(如下代码，最终list可通过value.list获取，也可以从listArr中拿到)。
使用方法：
① npm install awe-dnd;
② main.js文件：
import VueDND from 'awe-dnd'
Vue.use(VueDND)
③ 使用页面：
<el-checkbox-group v-model="checkedListArr" :min="1" :max="3">
<transition-group>
<el-checkbox :label="el.name" v-for="el in listArr" :key="el.id" v-dragging="{item:el,list:listArr,group:'el'}"></el-checkbox>
</transition-group>
</el-checkbox-group>
mounted(){
this.$dragging.$on('dragged', ({ value }) => {
// console.log(value.item);
// console.log(value.otherData);
console.log(value.list);
console.log(this.listArr);
})
}
注：不需要再update时监听list,每次拖拽完成事件中的value可获取，当前变量listArr也会同步改变；它同样存在过渡动画效果不好的问题；解决方案：给拖拽元素列表增加动画效果，如下：
css : .flip-list-move {
transition: all .5s linear .01s;
}
dom: 给transition-group 加上 name="flip-list"
