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>
詳細(xì)參考cardDragger使用文檔
注:可實(shí)現(xiàn)拖拽功能，且內(nèi)部組件支持自定義內(nèi)容，也提供了相關(guān)方法实愚；但無法給出拖拽后的排序列表list,只能根據(jù)拖拽前后的索引自行排序或悲；
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相關(guān)方法調(diào)用后list會(huì)自行更新;并支持過渡動(dòng)畫饥臂，并可以手動(dòng)配置言沐；
3 vue-dragging
vue-dragging是通過在元素上添加指令實(shí)現(xiàn)拖拽的邓嘹，在mounted時(shí)監(jiān)聽拖拽結(jié)束獲取拖拽后數(shù)據(jù)，且list會(huì)自動(dòng)更新(如下代碼险胰，最終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時(shí)監(jiān)聽list,每次拖拽完成事件中的value可獲取起便，當(dāng)前變量listArr也會(huì)同步改變棚贾；它同樣存在過渡動(dòng)畫效果不好的問題窖维；解決方案：給拖拽元素列表增加動(dòng)畫效果，如下：
css :??.flip-list-move?{
??????????? transition:?all?.5s?linear?.01s;
? ? ? ? ? }
dom:? 給transition-group 加上 name="flip-list"
