Vue-draggable和awe-dnd 拖拽插件的使用简介

一、Vue-draggable

1、安装组件

npm i -s vuedraggable

2、在vue项目中引入该组件并注册

import Draggable from 'vuedraggable';
......
new Vue({
el:'#app',
components:{
   Draggable
},
data() {
return {

})

3、在模板中使用

<draggable 
     v-bind="{group:'favItem',animation:150}" 
     v-model="list" 
     @change="change"
     @start="start"
     @end="end">
  <button v-for="item in list" :key="item.key">{{item.text}}</button>
</draggable>
......
new Vue({
    el:'#app',
    components:{
       Draggable
    },
    data() {
       return {
          ...
    }),
    methodes:{
     change(evt) {},
     start(evt) {},
     end(evt) {},
    }
  })

各项配置介绍：vuedraggable文文档
start和end只会在拖拽元素移动的开始和结束时触发，过程中不会触发，这也是在项目中最后选用的原因。

二、awe-dnd

1、安装

npm i -s awe-dnd

2、导入插件

##  main.js
import VueDND from 'awe-dnd';
Vue.use(VueDND);

3、使用

  <button 
    v-for="fav in FavList" 
    :key="item.key"
    v-dragging="{item:fav,list:FavList}"
    >{{item.text}}</button>
......
new Vue({
    el:'#app',
    components:{
       Draggable
    },
    data() {
       return {
          ...
    }),
    mounted(){
    this.$dragging.$on('dragged',({value})=> {
        console.log(value.list)
   })
  }
   })

会一直监听拖拽的过程，在拖拽的过程中会一直打印信息；