前端功能拖拽篇:dragleave拖拽事件穿透子元素的优雅解决方案

文章目录

  • 前情提要
  • 应用场景
    • ⭐拖拽改变元素位置
    • ⭐拖拽改变目标区域的样式
    • ⭐dragleave拖拽事件穿透子元素的优雅解决方案
  • 最后

前情提要

在这里插入图片描述
在前端工作过程中,避免不了要接触各种技术,拖拽就是其中一个,大部分关于拖拽的基础知识和Demo都在MDN中写的很详细的,这里便不再赘述,给大家分享一个MDN飞机票


应用场景

每个人会接触不同的场景和需求,但是底层都是基于这些事件及API的,那我就直接分享几个有价值的点,可以节省大家的时间。

⭐拖拽改变元素位置

这个功能要依据几个事件
1、dragstart
2、dragover //dragover必须要在此事件中取消浏览器的默认行为,否则drop事件不会生效
3、drop

// 第一步,记录鼠标指针在元素上的偏移量
const rightItemDragStart = (event: any) => {// 记录初始鼠标偏移量mouseOffsetMap.value = { x: event.offsetX, y: event.offsetY }// 传递拖拽元素idevent.dataTransfer.setData('text/plain', event.target.id)event.dataTransfer.setData('rightDrag', true)
}
// 第二步 设置阻止默认行为
const handleDragOver = (event: DragEvent) => {// 阻止默认行为以允许放置event.preventDefault()
}
// 第三步 计算元素位置赋值
const handleDrop = (event: any) => {// eventPos 这个位置就是元素放置后的准确位置eventPos = {x: event.offsetX - mouseOffsetMap.value.x,y: event.offsetY - mouseOffsetMap.value.y,}...// 阻止默认行为(会作为某些元素的链接打开)event.preventDefault()
}

⭐拖拽改变目标区域的样式

依据俩个事件,要绑定给目标Dom
1、dragenter
2、dragleave

/*** 处理拖拽进入事件** @param event 拖拽事件对象*/
const handleDragEnter = (event: any) => {rightWrapRef.value?.classList.add('out-line')
}
/*** 当拖拽元素离开目标区域时触发** @param event 拖拽事件对象*/
const handleDragLeave = (event: DragEvent) => {rightWrapRef.value?.classList.remove('out-line')
}

⭐dragleave拖拽事件穿透子元素的优雅解决方案

如果目标区域的dom结构比较复杂,比如我在工作中的场景这样:
在这里插入图片描述
我想从右测往左侧的列表里拖拽,并且在进入左侧区域的时候,为区域增加一个虚线框,鼠标离开的时候取消虚线框。但此时问题出现了,在我拖拽进入区域后,每一个子元素的区域都会致使我重复触发enter,leave,导致虚线框闪烁,在一番调研后发现确实有这个问题,它不是事件的冒泡,也不是默认行为,而是改方法的特性导致的,所以大家只好另辟蹊径,怎么做的都有,但我认为最优雅的是下面这种。主要利用俩个方法
1、handleLeftDragEnter
2、handleLeftDragLeave

const draggingCounter = ref(0)
const handleLeftDragEnter = (event: any) => {draggingCounter.value++// 左侧元素放入左侧区域不处理leftWrapRef.value?.classList.add('out-line')
}
const handleLeftDragLeave = (event: any) => {draggingCounter.value--if(draggingCounter.value === 0) {leftWrapRef.value?.classList.remove('out-line')}
}

这里利用一个计数变量,大家看我打印这个一次拖拽的逻辑就很好理解了
在这里插入图片描述
俩次进入元素是因为进入最外部区域算一次,途径子元素算一次,离开子元素也是同理,我们通过判断数值为0来推导离开父元素的区域也是很合理的做法。大家如果还有什么好的建议和观点欢迎讨论学习。

最后

📚 vue专栏
☃️ 个人简介:一个喜爱技术的人。
🌞 励志格言: 脚踏实地,虚心学习。
❗如果文章还可以,记得用你可爱的小手点赞👍关注✅,我会在第一时间回、回访,欢迎进一步交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/337773.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务 feign-gateway

早期微服务跨集群调用 使用的是Eureka 和RestTemplate,这种写法虽然可以解决服务之间的调用问题 ,但是随着服务的增多,实例变动,早期的写法相当于把请求方式,请求地址,参数写死了,耦合度太高,参…

易语言本地IP一键切换程序(附带源码)

易语言本地IP一键切换程序 效果图部分源码源码领取下期更新预报 效果图 部分源码 .判断开始 (单选框1.选中 = 真)标签5.标题 = #换行符 + “正在切换IP.”.如果真 (运行 (“netsh interface ip set address ” + #引号 &#xff…

开发一套家政上门预约服务系统需要运用的关键技术

家政上门预约服务系统开发是指建立一个在线平台或应用程序,用于提供家政服务的预约和管理功能。该系统的目标是让用户能够方便地预约各种家政服务,如保洁、家庭护理、月嫂、家电维修等,并实现服务供应商管理和订单管理等功能。 开发一套家政上…

python-数据可视化(总)

python-数据可视化 ** 数据可视化 指的是通过可视化表示来探索数据,它与数据挖掘**紧密相关,而数据挖掘指的是使用代码来探索数据集的规律和关联。数据集可以是用一行代码就能表示的小型数字列表,也可以是数以吉字节的数据 最流行的工具之一…

uniapp条件编译

先看官网介绍: 语法: 开始语法: // 指定平台解析 #ifdef H5 //指定平台不解析 差别:多了个n #ifndef H5 //多平台支持解析 #ifdef H5 || MP-WEIXIN //多平台不支持解析 #ifndef H5 || MP-WEIXIN 结束语法: …

DBeaver连接Oracle报错:ORA-12514

Listener refused the connection with the following error:ORA-12514, TNS:listener does not currently know of service requested inconnect descriptor ———————————————— 1.报错信息2.配置正确结语 ———————————————— 如果是第一次连接Or…

PS Mac Photoshop 2024 for Mac[破]图像处理软件[解]PS 2024安装教程[版]

Mac分享吧 文章目录 效果一、准备工作二、开始安装1、Anticc简化版安装1.1双击运行软件,安装1.2 解决来源身份不明的开发者问题**此代码为打开:系统偏好设置 – 隐私与安全性,中的【任何来源】,如下图:**1.3 再次运行…

Linux - 文件管理高级 find、grep

0.管道 | 将前面命令的标准输出传递给管道作为后面的标准输入 1.文件查找 find find 进行文件查找时,默认进行递归查找,会查找隐藏目录下的文件 1.1 用法 # find 查找路径 查找条件... -type // 文件类型 f 普通文件 b 设备 d …

10Linux 进程管理学习笔记

Linux 进程管理 目录 文章目录 Linux 进程管理一.进程1.显示当前进程状态(ps)进程树(pstree)1.1实时显示进程信息(top)顶部概览信息:CPU 状态:内存状态:进程信息表头:进程列表:1.2(htop) 2.终止进程(kill)2.1通过名称…

Centos给普通用户添加sudo命令权限

打开sudoers文件 sudo visudo 修改sudoers文件 找到root ALL(ALL) ALL这一行,即如下图标出红线的一行 在此行下新增如下内容: lbs为用给予sudo执行权限的用户名 # 执行sudo命令,需要输入命令 lbs ALL(ALL) ALL 或 # 执行sudo命令,…

迅狐跨境电商系统源码:技术栈与多端集成

随着全球化贸易的不断深入,跨境电商系统源码成为了连接不同国家和地区消费者与商家的重要桥梁。本文将探讨跨境电商系统源码的技术栈以及如何通过多端集成来提升用户体验。 技术栈概览 跨境电商系统源码的技术栈是构建高效、稳定平台的基础。以下是构建跨境电商系…

Android 11 Audio strategy配置解析

在启动AudioPolicyService时,通过EngineBase的loadAudioPolicyEngineConfig函数去解析strategy配置。其调用流程如下 接下来就对loadAudioPolicyEngineConfig展开分析 1,解析volume标签 engineConfig::ParsingResult EngineBase::loadAudioPolicyEngine…

束测后台实操文档2-OpenWrt

束测后台实操文档1-PVE、PBS 上面文,把proxmox装好并添加好PBS上的镜像存储空间后,还原已经做好的镜像基本上就可以在已有的镜像下开展工作了。 调试的PVE环境一般两个网口,一个外网wan,一个子网lan,虚拟机一般在lan…

特征工程技巧——OneHot编码

我们以Kaggle比赛里面的一个数据集跟一个公开代码为例去解释我们的OneHot编码。 简单来说,独热编码是一种将类别型变量转换为二进制表示的方法,其中每个类别被表示为一个向量,向量的长度等于类别的数量,其中只有一个元素为1&…

Leetcode刷题笔记6

34. 在排序数组中查找元素的第一个和最后一个位置 34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣(LeetCode) 解法一:暴力查找 [1, 2, 3, 3, 3, 4, 5] t 3 从前往后扫描暴力查找,最坏情况下O(N) 优化 利用数组有序的…

TCP的重传机制

TCP 是一个可靠的传输协议,解决了IP层的丢包、乱序、重复等问题。这其中,TCP的重传机制起到重要的作用。 序列号和确认号 之前我们在讲解TCP三次握手时,提到过TCP包头结构,其中有序列号和确认号, 而TCP 实现可靠传输…

Artifactory清理二进制文件丢失的制品

一、摘要 当制品上传到 Artifactory 时,Artifactory 会在数据库中记录制品的相关元数据信息,包括文件路径、大小、校验和(如 MD5、SHA1)、上传时间、索引、依赖等。实际的制品二进制文件会存储在指定的存储后端,具体的…

基于Java+SpringBoot+Mybaties-plus+Vue+elememt + uniapp 新闻资讯 的设计与实现

一.项目介绍 本系统分为 后端 和 小程序端 后端:点击登录按钮 设置个人中心、 管理员账号数据维护、 基础数据维护、 短视频信息维护(包括查看短视频留言、短视频收藏)、 论坛维护(增删改查帖子信息,包括查…

docker查看容器目录挂载

查看命令 docker inspect --format{{ json .Mounts }} <container_id_or_name> | jq 示例 docker inspect --format{{ json .Mounts }} af656ae540af | jq输出

一篇文章让你学会专注

专注&#xff0c;字典的释义是&#xff1a;专心注意&#xff1b;精神贯注。 我个人理解的是&#xff1a;用力屏蔽无关的事物&#xff0c;全身心力地专门注意一个事物。 你关心的&#xff0c;才能注意到&#xff0c;注意到了&#xff0c;才能故意地注意&#xff0c;进而全身心力…