当前位置： 首页 > news >正文

HTML5 Drag and Drop

news 2026/3/31 21:13:41

这是2个组合事件

dom对象分源对象和目标对象

绑定的事件也是分别区分源对象和目标对象

 事件绑定

事件顺序

被拖拽元素，事件触发顺序是 dragstart->drag->dragend；

对于目标元素，事件触发的顺序是 dragenter->dragover->drop/dropleave。

其中drag和dragover会分别在源元素和目标元素反复触发。整个流程一定是dragstart第一个触发，dragend最后一个触发。

这里还有一个注意的点，如果某个元素同时设置了dragover和drop的监听，那么必须阻止dragover的默认行为，否则drop将不会被触发。

问题

drop事件里面的e.offsetY会收到目标对象内部的子节点影响（如果在目标节点的子节点上是否标签），拿到是相对子节点内部的x，y距离。

修复：

  1. dragstart回调中给所有目标对象的子简单添加样式pointerEvents：none；让他们不会接受任何事件
  2. dragend的时候，恢复所有对象目标子节点的样式为：pointerEvents：auto；

 demo:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.wrap {height: 400px;overflow: auto;background-color: beige;}.inner {height: 1900px;position: relative;}.draggable {bottom: 10px;right: 10px;width: 100px;height: 100px;background-color: rebeccapurple;position: fixed;}.inner_box {top: 1800px;right: 10px;width: 100px;height: 100px;background-color: rebeccapurple;position: absolute;}</style>
</head><body><div class="wrap"><div class="inner"><div class="inner_box"></div></div></div><div draggable="true" class="draggable"></div><script>const inner = document.querySelector(".inner");const source = document.querySelector(".draggable")const inner_box=document.querySelector(".inner_box");inner.addEventListener("dragover", (e) => {e.preventDefault();console.log("e.offsetY over", e.offsetY, e.target)});inner.dragenter = function (e) {console.log("e enter", e.offsetY)}//源目标开始拖拽时候source.addEventListener("dragstart", (e) => {console.log("e start", e.offsetY)//inner_box.style.pointerEvents="none";});inner.ondrop = function (e) {console.log("e", e.offsetY)}</script>
</body></html>

参考

看完就懂的前端拖拽那些事 - 掘金

HTML 拖放（Drag and Drop）入坑实战总结篇 - 掘金

两个事件直接传递数据

DataTransfer 

参考：https://www.cnblogs.com/guo-siqi/p/16358323.html

相关文章：

HTML5 Drag and Drop

这是2个组合事件 dom对象分源对象和目标对象 绑定的事件也是分别区分源对象和目标对象 事件绑定 事件顺序 被拖拽元素&#xff0c;事件触发顺序是 dragstart->drag->dragend&#xff1b; 对于目标元素&#xff0c;事件触发的顺序是 dragenter->dragover->drop/…...

编程日记 2023/2/26 9:41:33

惠普m1136打印机驱动程序安装教程

惠普m113打印机是一款功能强大的多功能打印机&#xff0c;它能够打印、复印、扫描和传真等。如果你要使用这款打印机&#xff0c;你需要下载并安装驱动程序&#xff0c;以确保它能够在你的计算机上正常工作。在本文中&#xff0c;我们将介绍如何下载和安装惠普m1136打印机驱动程…...

编程日记 2023/2/26 9:39:18

数据增强，扩充了数据集，增加了模型的泛化能力

数据增强&#xff08;Data Augmentation&#xff09;是在不实质性的增加数据的情况下&#xff0c;从原始数据加工出更多的表示&#xff0c;提高原数据的数量及质量&#xff0c;以接近于更多数据量产生的价值。 其原理是&#xff0c;通过对原始数据融入先验知识&#xff0c;加工…...

编程日记 2023/2/26 9:35:54

MySQL/Oracle获取当前时间几天/分钟前的时间

获取当前时间 要想获取当前时间几天/分钟前的时间&#xff0c;首先要知道怎么获取当前时间&#xff1b; 对于MySQL和Oracle获取当前时间的方法是不一样的&#xff1b; MySQL&#xff1a; select NOW(); 示例&#xff1a; Oracle&#xff1a; select sysdate from dual; 示…...

编程日记 2023/2/26 9:34:47

如何在Wordpress中使用wp_nav_menu()在＜li＞及a标记中添加Class

我正在使用wp_nav_menu($args),我想将my_own_classCSS类名添加到<li>元素中以获得以下结果:<li classmy_own_class><a href>Link</a>怎么做&#xff1f;wp_nav_menu()在<li>标记中添加Class方法一&#xff1a;只需使用其他参数并为nav_menu_css_…...

编程日记 2023/2/26 9:33:41

Chat Support Board WordPress聊天插件 v3.5.8

功能列表 支持和聊天功能 Slack聊天完全同步 - 直接从Slack发送和接收用户信息。 立即工作 - 只需插入短码&#xff0c;即可立即安装和使用。 丰富的信息 - Dialogflow机器人发送丰富的信息。 机器人--集成一个由API.AI驱动的多语言机器人。 电子邮件通知 - 当收到回复时&#…...

编程日记 2023/2/26 9:32:33

2022年网络安全竞赛——数字取证调查attack.pcapng

攻击日志分析：需求环境可私信博主获取 任务环境说明： 服务器场景：PYsystem0031服务器场景操作系统：未知服务器场景FTP用户名:anonymous 密码：空从靶机服务器的FTP上下载attack.pcapng数据包文件，通过分析数据包attack.pcapng，找出黑客的IP地址，并将黑客的IP地址作为FL…...

编程日记 2023/2/26 9:31:24

2023最新MongoDB规范

前言 MongoDB是非关系型数据库的典型代表&#xff0c;DB-Engines Ranking 数据显示&#xff0c;近年来&#xff0c;MongoDB在 NoSQL领域一直独占鳌头。MongoDB是为快速开发互联网应用 而设计的数据库系统&#xff0c;其数据模型和持 久化策略就是为了构建高读/写的性能&#x…...

编程日记 2023/2/26 9:30:14

gcc的使用，调试工具gdb的使用

gcc编译 gcc编译可以分为四个步骤&#xff0c;预处理、编译、汇编、链接。 预处理命令&#xff1a;gcc -E hello.c -o hello.i编译命令&#xff1a;gcc -S hello.i -o hello.s汇编命令&#xff1a; gcc -c hello.s -o hello.o链接命令&#xff1a;gcc hello.o -o hello gcc…...

编程日记 2023/2/26 9:29:07

Python变量的定义和使用

定义&#xff1a;变量就是计算机内存中存储某些数据的位置的名称 形象理解变量就是一个存放东西的容器&#xff0c;该容器的名字就叫做变量&#xff0c;容器存放的东西就是变量的值 变量的组成&#xff1a; 标识&#xff1a;标识对象所储存的内存地址&#xff0c;使用内置函数i…...

编程日记 2023/2/26 9:25:44

SSM框架-AOP概述、Spring事务

16 spring整合mybatis 16.1 前情代码 实体类 public class Account {private Integer id;private String name;private Double money;public Integer getId() {return id;}public void setId(Integer id) {this.id id;}public String getName() {return name;}public void …...

编程日记 2023/2/26 9:24:35

一文搞定Android Vsync原理简析

屏幕渲染原理"现代计算机之父"冯诺依曼提出了计算机的体系结构: 计算机由运算器&#xff0c;存储器&#xff0c;控制器&#xff0c;输入设备和输出设备构成&#xff0c;每部分各司其职&#xff0c;它们之间通过控制信号进行交互。计算机发展到现在&#xff0c;已经出…...

编程日记 2023/2/26 9:23:26

第八届蓝桥杯省赛 C++ B组 - K 倍区间

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;蓝桥杯题解集合 &#x1f4dd;原题地址&#xff1a;K 倍区间 &#x1f4e3;专栏定位&#xff1a;为想参加蓝桥杯的小伙伴整理常考算法题解&#xff0c;祝大家…...

编程日记 2023/2/26 9:22:20

UDP与TCP协议

目录 UDP协议 协议报头 UDP协议特点&#xff1a; 应用场景&#xff1a; TCP TCP协议报头 确认应答机制 理解可靠性 超时重传机制 连接管理机制 三次握手&#xff1a; 四次挥手&#xff1a; 滑动窗口 如何理解缓冲区和滑动窗口&#xff1f; 倘若出现丢包&#xf…...

编程日记 2023/2/26 9:21:12

rosbag相关使用工具

文章目录一、 rosbag 导出指定话题生成新rosbag二、 rosbag 导出视频1. 脚本工具源码2. 操作2.1 安装 ffmpeg2.2 导出视频3. 视频截取4. 压缩视频附录&#xff1a;rosbag2video.py 源码一、 rosbag 导出指定话题生成新rosbag rosbag filter 2023-02-25-19-16-01.bag depth.bag…...

编程日记 2023/2/26 9:20:04

数据结构与算法—栈stack

目录 栈 栈的复杂度 空间复杂度O(1) 时间复杂度O(1) 栈的应用 1、栈在函数调用中的应用&#xff1b; 2、栈在求表达式的值的应用&#xff1a; 栈的实现 栈 后进先出&#xff0c;先进后出&#xff0c;只允许在一端插入和删除 从功能上&#xff0c;数组和链表可以代替栈…...

编程日记 2023/2/26 9:18:56

【学习笔记】[ARC150F] Constant Sum Subsequence

第一眼看上去&#xff0c;这道题一点都不套路 第二眼看上去&#xff0c;大概是要考dpdpdp优化&#xff0c;那没事了&#xff0c;除非前面333道题都做完了否则直接做这道题肯定很亏 首先我们要定义一个好的状态。废话 设fsf_{s}fs​表示BBB序列的和为sss时&#xff0c;能达到…...

编程日记 2023/2/26 9:17:49

Node.js实现大文件断点续传—浅析

Node.js简介&#xff1a; 当谈论Node.js时&#xff0c;通常指的是一个基于Chrome V8 JavaScript引擎构建的开源、跨平台的JavaScript运行时环境。以下是一些Node.js的内容&#xff1a; 事件驱动编程&#xff1a;Node.js采用了事件驱动的编程范式&#xff0c;这意味着它可以异步…...

编程日记 2023/2/26 9:16:40

Spring Cloud Nacos源码讲解（九）- Nacos客户端本地缓存及故障转移

Nacos客户端本地缓存及故障转移 ​ 在Nacos本地缓存的时候有的时候必然会出现一些故障&#xff0c;这些故障就需要进行处理&#xff0c;涉及到的核心类为ServiceInfoHolder和FailoverReactor。 ​ 本地缓存有两方面&#xff0c;第一方面是从注册中心获得实例信息会缓存在内存当…...

编程日记 2023/2/26 9:15:34

MySQL知识点小结

事务 进行数据库提交操作时使用事务就是为了保证四大特性,原子性,一致性,隔离性,持久性Durability. 持久性:事务一旦提交,对数据库的改变是永久的. 事务的日志用于保存对数据的更新操作. 这个操作T1事务操作的会发生丢失,因为最后是T2提交的修改,而且T2先进行一次查询,按照A…...

编程日记 2023/2/26 9:14:26

手把手调试：从V8引擎的ArrayBuffer到WebAssembly，一步步拆解Chrome CVE-2020-6507漏洞利用链

深入解析Chrome V8引擎漏洞利用&#xff1a;从ArrayBuffer到WebAssembly的内存操控实战 浏览器安全研究领域近年来持续升温&#xff0c;其中V8引擎作为Chrome和Node.js的核心组件&#xff0c;其安全性直接影响着数十亿用户。本文将带您深入探索一个典型V8漏洞&#xff08;CVE-2…...

编程新知 2026/3/31 21:00:40

Quartus II 13.1 NCO IP核调用失败？可能是这两个坑你没注意（附详细license配置指南）

Quartus II 13.1 NCO IP核调用深度排障指南&#xff1a;从环境配置到授权管理 1. 环境准备&#xff1a;Java运行时环境的隐形陷阱 在FPGA开发中&#xff0c;数字控制振荡器&#xff08;NCO&#xff09;IP核是实现高精度频率合成的关键组件。然而&#xff0c;当你在Quartus II 1…...

编程新知 2026/3/31 20:15:49

comsol地热井周期性抽采回灌 浅层地热水利用，非均匀周期循环抽住。 夏季注热抽冷冬季注冷抽...

comsol地热井周期性抽采回灌 浅层地热水利用&#xff0c;非均匀周期循环抽住。 夏季注热抽冷冬季注冷抽热 comsol论文复现&#xff0c;建模指导地热井的周期性调度像极了呼吸运动。我盯着屏幕上跳动的温度场云图&#xff0c;突然意识到这种冷热交替的运作模式&#xff0c;本质上…...

编程新知 2026/3/31 18:56:20

让通用 URL 准确落到目标 Page Builder：SAP Fiori 页面管理中的重定向实践

在很多 SAP Fiori 项目里，大家更容易把注意力放在 SAPUI5 组件、OData 服务、Launchpad 编排，或者 Fiori Elements 的元数据驱动开发上，却很少有人愿意花时间审视一条看似普通的访问路径。当系统进入页面管理阶段，尤其是管理员通过 Page Administration UI 去打开、维护、跳…...

编程新知 2026/3/31 18:40:11

解码器精准调优：LoRA赋能Depth-Anything-V2实现绝对深度估计

1. LoRA技术如何革新Depth-Anything-V2的深度估计 当我在实验室第一次尝试用LoRA微调Depth-Anything-V2时&#xff0c;意外发现只需要调整解码器中1x1卷积层的极少量参数&#xff0c;就能让相对深度模型输出精确的绝对深度值。这就像给一个只会判断"远近"的模型突然装…...

编程新知 2026/3/31 18:25:59

Nunchaku FLUX.1-dev实战：手把手教你用ComfyUI生成惊艳AI图片

Nunchaku FLUX.1-dev实战&#xff1a;手把手教你用ComfyUI生成惊艳AI图片 1. 环境准备与快速部署 1.1 硬件与软件要求 在开始之前&#xff0c;请确保你的系统满足以下基本要求&#xff1a; 显卡&#xff1a;NVIDIA显卡&#xff08;推荐RTX 30/40系列&#xff0c;显存8GB&am…...

编程新知 2026/3/31 17:29:21

图解Linux内核DRM框架：从用户态ioctl到plane更新的完整数据流（以4.14版本为例）

图解Linux内核DRM框架&#xff1a;从用户态ioctl到plane更新的完整数据流&#xff08;以4.14版本为例&#xff09; 在图形显示技术领域&#xff0c;Linux内核的DRM&#xff08;Direct Rendering Manager&#xff09;框架扮演着核心角色。本文将聚焦于DRM_IOCTL_MODE_SETPLANE这…...

编程新知 2026/3/31 16:36:19

影刀RPA实战：用Python字符串处理提升自动化效率（附5个常用脚本）

影刀RPA实战&#xff1a;5个Python字符串处理脚本解决自动化难题 在影刀RPA的自动化流程中&#xff0c;字符串处理就像流水线上的精密工具&#xff0c;直接决定了数据处理的准确性和效率。当我们需要从混乱的日志中提取关键信息、清洗客户提交的表格数据或转换不同系统的文本格…...

编程新知 2026/3/31 16:17:57

硬币凑钱--动态规划--完全背包的变式

1.硬币凑钱import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int nsc.nextInt();//背包问题的其中一种int[] dpnew int[n1];for(int i1;i<n…...

编程新知 2026/3/31 15:35:20

Llama-3.2V-11B-cot与Dify集成：零代码构建企业AI智能体

Llama-3.2V-11B-cot与Dify集成&#xff1a;零代码构建企业AI智能体 最近和几个做企业服务的朋友聊天&#xff0c;大家普遍有个感觉&#xff1a;现在AI模型能力越来越强&#xff0c;但真要把它们用起来&#xff0c;门槛还是有点高。特别是对于业务部门的人来说&#xff0c;看着…...

编程新知 2026/3/31 15:27:13