vuedraggable拖拽到目标区域实现过程解析

// html部分
<div v-for="item in list" :key="item" class="item" >
   <p 
   @dragstart="dragstart($event,item)" //这是拖拽开始
   @dragend="dragend($event)" //这是拖拽结束
   @drag="drag($event)" //这是拖拽中
       draggable="true" //这是给div注册拖拽
   >{{item}}</p>
</div>
//js部分
dragstart(e,item){ //拖拽开始时将item存入vuex
   this.vuex = item 
   console.log(e.target)
},
drag(e){ //拖拽中执行的事件
            // console.log('drag',e)s
},
dragend(e){ //拖拽结束执行的事件
            console.log('dragend',e)
}

//html部分
<div>
   <div class="text" 
   @dragleave="dragleave($event)" //当拖拽离开这个div时
   @dragover="dragover($event)" //拖拽在这个div里面拖拽时
   @drop='drop($event)'//在div里拖拽停止时
   ></div>      
</div>
//js部分
dragleave(e){ //当拖拽离开这个div时执行的事件
   console.log('dragleave',e)
},
dragover(e){ //拖拽在这个div里面拖拽时执行的事件
   //一定要执行preventDefault(),否则drop事件不会被触发
   e.preventDefault() 
},
drop(e){ //在div里拖拽停止时执行的事件
   alert('拿到Vuex的值')
}

<div>
   <dragA></dragA>
   <dragB></dragB>
</div>
import dragA from '@/components/dragA.vue';
import dragB from '@/components/dragB.vue';