vuedraggable拖拽到目标区域实现过程解析
作者：他的猫MM
这篇文章主要为大家介绍了vuedraggable拖拽到目标区域实现过程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
目标
我要把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';
以上就是vuedraggable拖拽到目标区域实现过程解析的详细内容，更多关于vuedraggable目标区域拖拽的资料请关注脚本之家其它相关文章！