前端功能拖拽篇: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.mzph.cn/web/20188.shtml

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

相关文章

linux网络时间同步:使用NTP服务时间同步

文章目录 引言I 安装ntp1.1 启动ntp服务1.2 修改ntp.conf文件1.3 检查同步状态1.4 修改时间同步频率II 修复centos yum问题 :cannot find a valid baseurl for repoIII systemctl: command not found3.1 使用service控制防火墙3.2 systemctl相关命令IV windows网络时间同步4.1…

day-36 删除链表的倒数第 N 个结点

思路 首先计算出链表的长度,然后删除第n个节点即可,但要注意考虑特殊情况 解题方法 特殊情况:1.删除节点为最后一个节点 2.删除节点为头结点 Code /*** Definition for singly-linked list.* public class ListNode {* int val;* …

Go-知识并发控制Context

Go-知识并发控制Context 1. 介绍2. 实现原理2.1 接口定义2.2 Deadline()2.3 Done()2.4 Err()2.5 Value() 3. 空 context4. cancelCtx4.1 Done()4.2 Err()4.3 cancel()4.4 WithCancel4.5 例子4.6 总结 5. timerCtx5.1 Deadline5.2 cancel5.3 WithDeadline5.4 WithTimeout5.5 例子…

HTML+CSS+JS 熊猫登录表单

效果演示 实现了一个可爱的熊猫登录界面,页面背景使用了渐变色,熊猫的头部和身体使用了圆形和椭圆形的边框,使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局,包括用户名和密码的输入框和登录按钮,使用了CSS的过渡效果和伪类来实现输入框的动态效果。…

【LeetCode刷题】二分查找:山脉数组的峰顶索引、寻找峰值

【LeetCode刷题】Day 13 题目1:852.山脉数组的峰顶索引思路分析:思路1:暴力枚举O(N)思路2:二分查找O(logN) 题目2:162.寻找峰值思路分析:思路1:二分查找O(logN) 题目1:852.山脉数组的…

(二刷)代码随想录第15天|层序遍历 226.翻转二叉树 101.对称二叉树2

层序遍历 10 102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 综合代码&#xff1a; class Solution{public List<List<Integer>> resList new ArrayList<List<Integer>>();public List<List<…

QT窗口类型以及非模态窗口如何显示在顶层

一、 模态对话框 在弹出模态对话框时&#xff0c;除了该对话框整个应用程序窗口都无法接受用户响应&#xff0c;处于等待状态&#xff0c;直到模态对话框被关闭 使用exec 打开 非模态对话框 又叫做无模式对话框&#xff0c;即弹出非模态对话框时&#xff0c;用户仍然可以…

探索Web前端三大主流框架:React,Angular和Vue.js

在当今的Web开发领域&#xff0c;前端框架已成为构建响应式和交互式网页的基础。这些框架不仅提高了开发效率&#xff0c;还促进了代码的模块化和重用。其中&#xff0c;React&#xff0c;Angular和Vue.js是最受欢迎的三大主流前端框架&#xff0c;它们分别由Facebook&#xff…

2024华为OD机试真题-剩余银饰的重量-C++(C卷D卷)

题目描述 有 N 块二手市场收集的银饰,每块银饰的重量都是正整数,收集到的银饰会被熔化用于打造新的饰品。 每一回合,从中选出三块 最重的 银饰,然后一起熔掉。假设银饰的重量分别为 x 、y 和 z, 且 x <= y <= z。那么熔掉的可能结果如下: 如果x == y == z,那么三…

24年海南三支一扶报名流程步骤详解

一、考试时间安排&#xff1a; 报名时间&#xff1a;6月1日8:00至6月7日18:00 准考证打印时间&#xff1a;6月17日8:00 考试时间&#xff1a;6月22日 二、招聘人数 海南省计划招募390名高校毕业生 三、笔试内容&#xff1a; 笔试内容&#xff1a;综合能力和素质&#xff08;满分…

排队论 | 基于排队机制实现智能仓储机器人巡逻及避碰

研究背景: 智能仓储机器人在现代物流行业中扮演着重要的角色,能够提高仓库的运作效率和准确性。然而,仓储机器人在巡逻过程中可能会遇到其他机器人或障碍物,这就需要解决排队和避碰问题,以确保安全和高效的运作。 研究路线: 背景调研:了解智能仓储机器人的发展和应用…

【设计模式】JAVA Design Patterns——Iterator(迭代器模式)

&#x1f50d;目的 提供一种在不暴露其基础表示的情况下顺序访问聚合对象的元素的方法。 &#x1f50d;解释 真实世界例子 百宝箱包含一组魔法物品。有多种物品&#xff0c;例如戒指&#xff0c;药水和武器。可以使用藏宝箱提供的迭代器按类型浏览商品。 通俗描述 容器可以提供…

使用 .NET Core 实现微服务(带例子)

使用 .NET Core 实现微服务 使用 .NET Core 实现微服务架构涉及几个关键步骤&#xff0c;包括服务划分、API 网关、服务通信和容器化部署。下面是一个简化的示例&#xff0c;展示如何使用 .NET Core 实现一个基本的微服务架构。 步骤 1&#xff1a;创建独立的微服务 定义微服…

【AIGC-数字人】V-Express:渐进式训练的数字人视频生成技术

介绍 在人像视频生成领域&#xff0c;使用单张图像生成人像视频已经变得越来越普遍。一种常见的方法涉及利用生成模型来增强适配器以实现受控生成。然而&#xff0c;控制信号的强度可能会有所不同&#xff0c;包括文本、音频、图像参考、姿态、深度图等。其中&#xff0c;较弱的…

Vue.js - 生命周期与工程化开发【0基础向 Vue 基础学习】

文章目录 Vue 的生命周期Vue 生命周期的四个阶段Vue 生命周期函数&#xff08;钩子函数 工程化开发 & 脚手架 Vue CLI**开发 Vue 的两种方式&#xff1a;**脚手架目录文件介绍项目运行流程组件化开发 & 根组件App.vue 文件&#xff08;单文件组件&#xff09;的三个组成…

【PyCharm】无法创建虚拟环境,提示:has no attribute CPython3macOsBrew

报错信息&#xff1a; AttributeError: module virtualenv.create.via_global_ref.builtin.cpython.mac_os has no attribute CPython3macOsBrew报错原因&#xff1a; 可能含有多个virtualenv&#xff0c;发生冲突了。 解决方法&#xff1a; 终端执行以下命令&#xff1a; p…

LeetCode 图-岛屿问题

图 图的基本知识基本概念图的类型相关术语 图的存储 LeetCode 相关题目岛屿问题岛屿的最大面积岛屿的周长 图的基本知识 基本概念 图的类型 无向图有向图加权图 相关术语 顶点边路径路径长度环负权环连通性顶点的度入度出度 图的存储 邻接矩阵存储&#xff1a;是用一个二…

豆包大模型API接入

1.安装JDK pip install volcengine 2.API接入 from volcengine.maas.v2 import MaasService maas MaasService(maas-api.ml-platform-cn-beijing.volces.com, cn-beijing) maas.set_ak(###access_key###&#xff09; maas.set_sk(###secret_key###) req { "strea…

MongoDB~基本知识记录

为何要学Mongodb 工作以来&#xff0c;使用最多、了解最多的是MySQL。但技术的发展一定是依据痛点来的&#xff0c;就比如我遇到的痛点&#xff0c;一个业务、一个平台能力、存储的一个对象&#xff0c;随着产品和运营的需求&#xff0c;不断的进行变更&#xff0c;每一次的变…

真机调试 Error:系统错误,xxx exceed max limit 2MB

我们在使用微信开发者工具开发小程序、小游戏等应用时&#xff0c;往往会点击“真机调试”&#xff0c;微信扫描查看真实情况。 但是会出现下面的报错提示&#xff0c;是因为主包体积超过了2MB。 小程序有体积和资源加载限制&#xff0c;在微信小程序中&#xff0c;每个包不能…