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

HTML5 拖放（Drag and Drop）学习笔记

article 2026/2/23 15:59:13

一、HTML5 拖放简介

HTML5 拖放（Drag and Drop）是HTML5标准的一部分，允许用户抓取一个对象并将其拖动到另一个位置。拖放功能在现代网页中非常常见，例如文件上传、任务管理、布局调整等场景。

HTML5 拖放功能支持以下浏览器：

Internet Explorer 9+
Firefox
Opera
Chrome
Safari（注意：Safari 5.1.2不支持拖放功能）

二、HTML5 拖放的基本实现

1. 设置元素为可拖放

要使一个元素可拖动，需要将draggable属性设置为true。例如：

HTML复制

<img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)">

预览

2. 拖动什么：`ondragstart` 和 `setData()`

当元素被拖动时，会触发ondragstart事件。在这个事件中，可以使用dataTransfer.setData()方法设置拖动数据的类型和值。例如：

JavaScript复制

function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);
}

ev.dataTransfer.setData()：设置拖动数据的类型和值。
"text"：表示拖动数据的类型，这里使用"text"表示文本类型。
ev.target.id：表示被拖动元素的id。

3. 放到何处：`ondragover`

ondragover事件用于指定允许放置拖动数据的位置。默认情况下，元素是不允许放置拖动数据的。要允许放置，必须调用event.preventDefault()方法。例如：

JavaScript复制

function allowDrop(ev) {ev.preventDefault();
}

4. 进行放置：`ondrop`

当拖动的数据被放置到目标元素时，会触发ondrop事件。在这个事件中，可以使用dataTransfer.getData()方法获取拖动的数据。例如：

JavaScript复制

function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));
}

ev.preventDefault()：避免浏览器对数据的默认处理（例如以链接形式打开）。
ev.dataTransfer.getData("text")：获取拖动数据，返回在setData()方法中设置的值。
ev.target.appendChild()：将被拖动的元素追加到目标元素中。

三、HTML5 拖放的完整示例

以下是一个完整的HTML5拖放示例，展示了如何将一个图片拖动到一个矩形框中：

HTML复制

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML5 拖放示例</title><style>#div1 {width: 350px;height: 70px;padding: 10px;border: 1px solid #aaaaaa;}</style><script>function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}</script>
</head>
<body><p>拖动 RUNOOB.COM 图片到矩形框中：</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

预览

示例说明：

<img>元素：设置draggable="true"，使其可拖动，并绑定ondragstart事件。
<div>元素：绑定ondrop和ondragover事件，用于处理拖放逻辑。
JavaScript函数：
- drag()：设置拖动数据。
- allowDrop()：允许放置。
- drop()：处理放置逻辑。

四、更多实例

1. 在两个`<div>`元素之间拖放图像

以下是一个更复杂的示例，展示了如何在两个<div>元素之间拖放图像：

HTML复制

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML5 拖放 - 两个 div 之间</title><style>.box {width: 150px;height: 150px;border: 1px solid #aaaaaa;margin: 10px;padding: 10px;}</style><script>function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}</script>
</head>
<body><p>在两个矩形框之间拖动图片：</p><div class="box" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)" width="100" height="100"></div><div class="box" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

预览

示例说明：

两个<div>元素：分别作为源容器和目标容器。
拖动逻辑：与前面的示例类似，但增加了两个容器之间的交互。

HTML5 拖放（Drag and Drop）学习笔记

一、HTML5 拖放简介 HTML5 拖放（Drag and Drop）是HTML5标准的一部分，允许用户抓取一个对象并将其拖动到另一个位置。拖放功能在现代网页中非常常见，例如文件上传、任务管理、布局调整等场景。 HTML5 拖放功能支持以下浏览器&…...

编程日记 2026/2/16 3:17:17

Sass (Scss) 与 Less 的区别与选择

Sass 与 Less 的区别与选择 1. 语法差异2. 特性与支持3. 兼容性4. 选择建议在前端开发中，CSS预处理器如Sass（Syntactically Awesome Stylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使C…...

编程日记 2026/2/21 7:25:40

Unity2022发布Webgl2微信小游戏部分真机黑屏

复现规律： Unity PlayerSetting中取消勾选ShowSplashScreen 分析： 在Unity中，Splash Screen（启动画面） 不仅是视觉上的加载动画，还承担了关键的引擎初始化、资源预加载和渲染环境准备等底层逻辑。禁用后导…...

编程日记 2026/2/20 17:57:23

记一次线上SQL死锁事故

一、引言 SQL死锁是一个常见且复杂的并发控制问题。当多个事务在数据库中互相等待对方释放锁时，就会形成死锁，从而导致事务无法继续执行，影响系统的性能和可用性。死锁不仅会导致数据库操作的阻塞，增加延迟，还可能对…...

编程日记 2026/2/15 1:41:44

Java并发编程什么是分布式锁跟其他的锁有什么区别底层原理实战讲解

目录一、分布式锁的定义与核心作用二、分布式锁与普通锁的核心区别三、分布式锁的底层原理与实现方式 1. 核心实现原理 2. 主流实现方案对比 3. 关键技术细节四、典型问题与解决方案五、总结六、具体代码实现一、分布式锁的定义与核心作用分布式锁是一种在分布…...

编程日记 2026/2/22 7:38:31

【react】在react中async/await一般用来实现什么功能

目录基本概念工作原理优点注意事项底层原理实际应用场景 1. 数据获取 (API 请求) 2. 表单提交 3. 异步状态管理 4. 异步路由切换 5. 异步数据预加载 6. 第三方 API 调用 7. 文件上传/下载 8. 路由导航拦截关键注意事项基本概念 async 函数：用…...

编程日记 2026/2/15 13:54:03

Axure项目实战：智慧城市APP（六）市民互动（动态面板、显示与隐藏）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ 课程主题：市民互动主要内容：动态面板、显示与隐藏交互应用应用场景：AI产品交互、互动类应用案例展示： 案例视频&am…...

编程日记 2026/2/22 6:56:17

为何服务器监听异常？

报错： 执行./RCF后出现监听异常--在切换网络后，由于前面没有退出./RCF执行状态；重新连接后，会出现服务器监听异常原因如下： 由于刚开始登录内网，切换之后再重新登录内网，并且切换网络的过程中…...

编程日记 2026/2/14 4:22:28

1.认识Excel

一 Excel 可以用来做什么二提升技巧 1.数据太多 2.计算太累 3.提升数据的价值和意义 4.团队协作三学习目标学习目标不是为了掌握所有的技能，追逐新功能。而是学知识来解决需求，如果之前的技能和新出的技能都可以解决问题，那不学新技能也…...

编程日记 2026/2/22 15:33:17

目标跟踪——deepsort算法详细阐述

deepsort 算法详解 Unmatched Tracks（未匹配的轨迹）本质角色：是已存在的轨迹在当前帧中“失联”的状态，即预测位置与检测结果不匹配。生命周期阶段：已初始化：轨迹已存在多帧，可能携带历史信息（如外观特征、运动模型）。未被观测到：当前帧中未找到对应的检测框…...

编程日记 2025/7/27 13:18:11

AI Agent 是什么？从 Chatbot 到自动化 Agent（LangChain、AutoGPT、BabyAGI）

1. 引言：AI Agent 的演进 AI Agent（人工智能智能体）是 AI 发展的重要方向之一。早期的 AI 主要以 Chatbot 形式存在，如客服机器人、智能助手等，主要基于 NLP 技术进行任务处理。而随着大模型（LLM）能力的提升，AI Agent 逐步演进为能够自主执行任务的智能体，如 AutoGPT…...

编程日记 2025/9/5 13:06:50

定义在 src\http\ngx_http_core_module.c static char * ngx_http_core_root(ngx_conf_t *cf, ngx_command_t *cmd, void *conf) {ngx_http_core_loc_conf_t *clcf conf;ngx_str_t *value;ngx_int_t alias;ngx_uint_t …...

编程日记 2026/2/19 18:35:04

python康复日记-request库的使用，爬虫自动化测试

一，request的简单应用 #1请求地址 URLhttps://example.com/login #2参数表单 form_data {username: admin,password: secret } #3返回的响应对象response response requests.post(URL,dataform_data,timeout5 ) #4处理返回结果，这里直接打印返回网页的…...

编程日记 2026/2/11 4:33:43

光谱范围与颜色感知的关系

光谱范围与颜色感知是光学、生理学及技术应用交叉的核心课题，两者通过波长分布、人眼响应及技术处理共同决定人类对色彩的认知。以下是其关系的系统解析： ‌1.基础原理：光谱范围与可见光‌ ‌光谱范围定义‌： 电磁波谱中能被特定…...

编程日记 2026/2/22 14:54:47

OpenCV vs MediaPipe：哪种方案更适合实时手势识别？

引言手势识别是计算机视觉的重要应用，在人机交互（HCI）、增强现实（AR）、虚拟现实（VR）、智能家居控制、游戏等领域有广泛的应用。实现实时手势识别的技术方案主要有基于传统计算机视觉的方法&am…...

编程日记 2026/2/10 5:22:58

el-select下拉框，搜索时，若是匹配后的数据有且只有一条，则当失去焦点时，默认选中该条数据

1、使用指令当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。可使用方法2封装成共用函数，但用指令他人复用时比较便捷。 <el-tablev-loading"tableLoading"border:data"tableList"default-expand-allrow-key…...

编程日记 2026/2/21 17:30:57

网络地址转换技术（2）

NAT的配置方法： （一）静态NAT的配置方法进入接口视图配置NAT转换规则 Nat static global 公网地址 inside 私网地址内网终端PC2（192.168.20.2/24）与公网路由器AR1的G0/0/1（11.22.33.1/24）做…...

编程日记 2026/2/22 11:38:28

Python正则表达式（一）

目录一、正则表达式的基本概念 1、基本概念 2、正则表达式的特殊字符二、范围符号和量词 1、范围符号 2、匹配汉字 3、量词三、正则表达式函数 1、使用正则表达式： 2、re.match()函数 3、re.search()函数 4、findall()函数 5、re.finditer()函数 6…...

编程日记 2026/2/13 17:48:09

【TI MSPM0】PWM学习

一、样例展示 #include "ti_msp_dl_config.h"int main(void) {SYSCFG_DL_init();DL_TimerG_startCounter(PWM_0_INST);while (1) {__WFI();} } TimerG0输出一对边缘对齐的PWM信号 TimerG0会输出一对62.5Hz的边缘对齐的PWM信号在PA12和PA13引脚上，PA12被…...

编程日记 2026/2/21 6:19:44

MySQL: 创建两个关联的表，用联表sql创建一个新表

MySQL: 创建两个关联的表建表思路 USERS 表：包含用户的基本信息，像 ID、NAME、EMAIL 等。v_card 表：存有虚拟卡的相关信息，如 type 和 amount。关联字段：USERS 表的 V_CARD 字段和 v_card 表的 v_card 字段用于建立…...

编程日记 2026/2/19 12:20:37

更改 vscode ! + table 默认生成的 html 初始化模板

vscode ! 快速成的 html 代码默认为： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…...

编程日记 2026/2/15 8:05:03

使用LVS的 NAT 模式实现 3 台RS的轮询访问

节点规划 1、配置RS RS的网络配置为NAT模式，三台RS的网关配置为192.168.10.8 1.1配置RS1 1.1.1修改主机名和IP地址 [rootlocalhost ~]# hostnamectl hostname rs1 [rootlocalhost ~]# nmcli c modify ens160 ipv4.method manual ipv4.addresses 192.168.10.7/24…...

编程日记 2026/2/15 1:28:44

R 基础语法

R 基础语法引言 R 是一种针对统计计算和图形表示而设计的编程语言和环境。它广泛应用于统计学、生物信息学、数据挖掘等领域。本文将为您介绍 R 语言的基础语法，帮助您快速上手。 R 的基本结构 R 语言的基本结构包括：变量、数据类型、运算符、控制结构、函数等。变量 …...

编程日记 2025/7/27 13:12:02

MySQL实战（尚硅谷）

要求代码 # 准备数据 CREATE DATABASE IF NOT EXISTS company;USE company;CREATE TABLE IF NOT EXISTS employees(employee_id INT PRIMARY KEY,first_name VARCHAR(50),last_name VARCHAR(50),department_id INT );DESC employees;CREATE TABLE IF NOT EXISTS departments…...

编程日记 2026/2/14 22:02:38

华为p10 plus 鸿蒙2.0降级emui9.1.0.228

需要用到的工具 HiSuite Proxy V3 华为手机助手11.0.0.530_ove或者11.0.0.630_ove应该都可以。官方的通道已关闭，所以要用代理，127.0.0.1端口7777 https://www.firmfinder.ml/ https://professorjtj.github.io/v2/ https://hisubway.online/articl…...

编程日记 2026/2/15 22:07:15

C# Modbus RTU学习记录

继C# Modbus TCP/IP学习记录后，尝试串口通信。操作步骤： 1.使用Visual Studio安装Nuget包NModbus.Serial。 2.使用Modbus Slave应用程序，工具栏Connection项，单击Connect，弹窗Connection Setup，修改Con…...

编程日记 2026/2/12 20:08:33

AI+Xmind自动生成测试用例（思维导图格式）

一、操作步骤：步骤1：创建自动生成测试用例智能体方式：使用通义千问/豆包智能体生成，以下两个是我已经训练好的智能体，直接打开使用即可通义智能体： https://lxblog.com/qianwen/share?shareId=b0cd664d-5001-42f0-b494-adc98934aba5&type=agentCard 豆包智能…...

编程日记 2026/2/13 2:53:44