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

HTML5 Drag and Drop

news 文章来源：https://blog.csdn.net/u014071104/article/details/129217488 2025/4/21 23:52:15

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

MySQL关于NULL值，常见的几个坑

数据库版本MySQL8。 1.count 函数 觉得 NULL值 不算数 &#xff0c;所以开发中要避免count的时候丢失数据。 如图所示&#xff0c;以下有7条记录&#xff0c;但是count(name)却只有6条。 为什么丢失数据&#xff1f;因为MySQL的count函数觉得 Null值不算数&#xff0c;就是说…...

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

OllyDbgqaqazazzAcxsaZ

本文通过吾爱破解论坛上提供的OllyDbg版本为例&#xff0c;讲解该软件的使用方法 F2对鼠标所处的位置打下断点&#xff0c;一般表现为鼠标所属地址位置背景变红F3加载一个可执行程序&#xff0c;进行调试分析&#xff0c;表现为弹出打开文件框F4执行程序到光标处F5缩小还原当前…...

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

Elasticsearch7.8.0版本进阶——自定义分析器

目录一、自定义分析器的概述二、自定义的分析器的测试示例一、自定义分析器的概述 Elasticsearch 带有一些现成的分析器&#xff0c;然而在分析器上 Elasticsearch 真正的强大之 处在于&#xff0c;你可以通过在一个适合你的特定数据的设置之中组合字符过滤器、分词器、词汇单 …...

编程日记 2023/2/26 9:11:02

spring事务-创建代理对象

用来开启事务的注解EnableTransactionManagement上通过Import导入了TransactionManagementConfigurationSelector组件&#xff0c;TransactionManagementConfigurationSelector类的父类AdviceModeImportSelector实现了ImportSelector接口&#xff0c;因此会调用public final St…...

编程日记 2023/2/26 9:09:55

Linux 配置NFS与autofs自动挂载

目录 配置NFS服务器 安装nfs软件包 配置共享目录 防火墙放行相关服务 配置NFS客户端 autofs自动挂载 配置autofs 配置NFS服务器 nfs主配置文件参数&#xff08;/etc/exports&#xff09; 共享目录 允许地址1访问&#xff08;选项1&#xff0c;选项2&#xff09; 循序地…...

编程日记 2023/2/26 9:08:46

【编程入门】应用市场（Python版）

背景 前面已输出多个系列&#xff1a; 《十余种编程语言做个计算器》 《十余种编程语言写2048小游戏》 《17种编程语言10种排序算法》 《十余种编程语言写博客系统》 《十余种编程语言写云笔记》 《N种编程语言做个记事本》 目标 为编程初学者打造入门学习项目&#xff0c;使…...

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

异常信息记录入库

方案介绍 将异常信息放在日志里面&#xff0c;如果磁盘定期清理&#xff0c;会导致很久之前的日志丢失&#xff0c;因此考虑将日志中的异常信息存在表里&#xff0c;方便后期查看定位问题。 由于项目是基于SpringBoot构架的&#xff0c;所以采用AdviceControllerExceptionHand…...

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

Spring Batch 高级篇-分区步骤

目录 引言 概念 分区器 分区处理器 案例 转视频版 引言 接着上篇&#xff1a;Spring Batch 高级篇-并行步骤了解Spring Batch并行步骤后&#xff0c;接下来一起学习一下Spring Batch 高级功能-分区步骤 概念 分区&#xff1a;有划分&#xff0c;区分意思&#xff0c;在…...

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

ES数据迁移_snapshot（不需要安装其他软件）

参考文章&#xff1a; 三种常用的 Elasticsearch 数据迁移方案ES基于Snapshot&#xff08;快照&#xff09;的数据备份和还原CDH修改ElasticSearch配置文件不生效问题 目录1、更改老ES和新ES的config/elasticsearch.yml2、重启老ES&#xff0c;在老ES执行Postman中创建备份目录…...

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

【Vue3 第二十章】异步组件 代码分包 Suspense内置组件 顶层 await

异步组件 & 代码分包 & Suspense内置组件 & 顶层 await 一、概述 在大型项目中&#xff0c;我们可能需要拆分应用为更小的块&#xff0c;以减少主包的体积&#xff0c;并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。 Vue 提供了 defineAsyncC…...

编程日记 2023/2/26 9:02:58