// 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){ //拖拽中執(zhí)行的事件
            // console.log('drag',e)s
},
dragend(e){ //拖拽結束執(zhí)行的事件
            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時執(zhí)行的事件
   console.log('dragleave',e)
},
dragover(e){ //拖拽在這個div里面拖拽時執(zhí)行的事件
   //一定要執(zhí)行preventDefault(),否則drop事件不會被觸發(fā)
   e.preventDefault() 
},
drop(e){ //在div里拖拽停止時執(zhí)行的事件
   alert('拿到Vuex的值')
}

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