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使用文档

注:可实现拖拽功能，且内部组件支持自定义内容，也提供了相关方法；但无法给出拖拽后的排序列表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);
        }     
    }
},

 
   

     

{{item}}

   

 
 
注：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)
③ 使用页面：
          
               
                   
               
           
 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"