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

HTML5 Drag and Drop

news 2026/5/31 22:34:36

这是2个组合事件

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

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

事件绑定

事件顺序

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

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

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

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

问题

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

修复：

dragstart回调中给所有目标对象的子简单添加样式pointerEvents：none；让他们不会接受任何事件
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对象分源对象和目标对象绑定的事件也是分别区分源对象和目标对象事件绑定事件顺序被拖拽元素，事件触发顺序是 dragstart->drag->dragend； 对于目标元素，事件触发的顺序是 dragenter->dragover->drop/…...

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

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

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

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

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

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

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

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

获取当前时间要想获取当前时间几天/分钟前的时间，首先要知道怎么获取当前时间； 对于MySQL和Oracle获取当前时间的方法是不一样的； MySQL： select NOW(); 示例： Oracle： 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>怎么做？wp_nav_menu()在<li>标记中添加Class方法一：只需使用其他参数并为nav_menu_css_…...

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

Chat Support Board WordPress聊天插件 v3.5.8

功能列表支持和聊天功能 Slack聊天完全同步 - 直接从Slack发送和接收用户信息。立即工作 - 只需插入短码，即可立即安装和使用。丰富的信息 - 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是非关系型数据库的典型代表，DB-Engines Ranking 数据显示，近年来，MongoDB在 NoSQL领域一直独占鳌头。MongoDB是为快速开发互联网应用而设计的数据库系统，其数据模型和持久化策略就是为了构建高读/写的性能&#x…...

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

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

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

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

Python变量的定义和使用

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

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

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原理简析

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

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

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

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

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

UDP与TCP协议

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

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

rosbag相关使用工具

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

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