image.png
我要把item1从A区域拖拽到B区域，我想在B区域设置监听回调事件
A区域代码:
// 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)
}
B区域代码:
//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';
