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

2023-06-26 09:06:45 作者：他的猫MM

这篇文章主要为大家介绍了vuedraggable拖拽到目标区域实现过程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

我要把item1从A区域拖拽到B区域，我想在B区域设置监听回调事件

A区域代码

// 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实现拖拽功能
Vue3模板引用的操作方式示例详解
2023-06-06
Vue中$router和$route的区别详解
2023-06-06
Vue3中Composition API和Options API的区别
2023-06-06
原生JS实现Vue transition fade过渡动画效果示例
2023-06-06
vue 调用浏览器摄像头实现及原理解析
2023-06-06
Electron-store本地存储功能用法详解
2023-06-06
electron+vue 实现静默打印功能
2023-06-06
Vue实现实时更新sessionStorage数据的示例代码
2023-06-06
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版 - 返回首页
2006-2024 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号