vue 中拖拽的几种实现方法

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"