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

HTML5 Drag and Drop

news 2026/2/8 7:07:37

这是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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08