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

// html部分
<div v-for="item in list" :key="item" class="item" >
   @dragstart="dragstart($event,item)" //这是拖拽开始
   @dragend="dragend($event)" //这是拖拽结束
   @drag="drag($event)" //这是拖拽中
       draggable="true" //这是给div注册拖拽
   >{{item}}</p>
//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 class="text" 
   @dragleave="dragleave($event)" //当拖拽离开这个div时
   @dragover="dragover($event)" //拖拽在这个div里面拖拽时
   @drop='drop($event)'//在div里拖拽停止时
//js部分
dragleave(e){ //当拖拽离开这个div时执行的事件
   console.log('dragleave',e)
dragover(e){ //拖拽在这个div里面拖拽时执行的事件
   //一定要执行preventDefault(),否则drop事件不会被触发
   e.preventDefault() 
drop(e){ //在div里拖拽停止时执行的事件
   alert('拿到Vuex的值')
公共区域代码
   <dragA></dragA>
   <dragB></dragB>
import dragA from '@/components/dragA.vue';
import dragB from '@/components/dragB.vue';
以上就是vuedraggable拖拽到目标区域实现过程解析的详细内容，更多关于vuedraggable目标区域拖拽的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
使用element+vuedraggable实现图片上传拖拽排序
vue使用vuedraggable实现嵌套多层拖拽排序功能
vue拖拽组件vuedraggable使用说明详解
使用vuedraggable实现从左向右拖拽功能
vue3使用vuedraggable实现拖拽功能
vuedraggable实现拖拽功能
2023-06-06
2023-06-06
2023-06-06
2023-06-06
2023-06-06
2023-06-06
2023-06-06
2023-06-06
2021-11-19
2021-11-09
2021-11-05
2021-10-26
电脑版 - 返回首页
2006-2024 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号