如何在HTML5中利用Draggable属性开启原生拖拽功能并实现数据交换-H5教程-PHP中文网

HTML5原生拖拽需设置draggable="true"并监听dragstart、dragover（须preventDefault）、drop等事件，通过dataTransfer传递数据，注意移动端不支持。

如何在html5中利用draggable属性开启原生拖拽功能并实现数据交换

HTML5 原生拖拽功能无需第三方库，靠 draggable 属性 + 一整套拖拽事件就能实现元素拖动和数据交换。关键不是“能不能拖”，而是“拖什么”和“往哪放”。

开启拖拽：设置 draggable 属性

只有显式声明 draggable="true" 的元素才可被拖动（默认为 false；文本、图片、链接等原生可拖动，但自定义 div、span 等必须手动开启）：

<div draggable="true" data-id="item-1">拖我走</div>
@@##@@

注意：draggable="false" 可禁用默认可拖元素（如禁用图片拖拽）；draggable="auto" 表示由浏览器决定（一般不用）。

捕获拖拽过程：监听核心事件

拖拽涉及两个角色：**被拖元素（drag source）** 和 **目标容器（drop target）**。需分别绑定事件：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

拖动源端（被拖元素）监听：
dragstart（开始拖时触发，用于设置拖拽数据）
drag（拖动中持续触发）
dragend（释放后触发，无论是否成功放置）
投放目标端（接收区域）监听：
dragenter（首次进入目标区域）
dragover（悬停在目标上时持续触发 —— 必须阻止默认行为才能允许投放）
dragleave（离开目标区域）
drop（在目标上松开鼠标，真正执行数据接收）

传递数据：用 DataTransfer 对象存取信息

拖拽的数据不通过 DOM 属性传递，而是写入事件对象的 dataTransfer（只读对象）。常用方法：

event.dataTransfer.setData(format, data)：在 dragstart 中设置数据，format 推荐用 "text/plain" 或自定义类型如 "application/json"
event.dataTransfer.getData(format)：在 drop 事件中读取对应格式的数据
event.dataTransfer.effectAllowed = "move/copy/link"：限定拖拽效果（可选，影响光标样式）
event.dataTransfer.dropEffect = "move"：在 dragover 或 drop 中指定实际生效的效果

示例：拖动一个任务卡片到不同列

<div class="task" draggable="true" data-id="t1">修复登录 Bug</div>
<div class="column" data-status="todo">待办</div>
<div class="column" data-status="done">已完成</div>
<p><script>
document.querySelector('.task').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.dataset.id);
e.dataTransfer.effectAllowed = 'move';
});</script></p><p>document.querySelectorAll('.column').forEach(col => {
col.addEventListener('dragover', e => {
e.preventDefault(); // 必须！否则 drop 不会触发
e.dataTransfer.dropEffect = 'move';
});</p><pre class="brush:php;toolbar:false;">col.addEventListener('drop', e => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const task = document.querySelector(`[data-id="${id}"]`);
  const status = col.dataset.status;
  task.dataset.status = status;
  col.appendChild(task); // 移动 DOM 节点
});

});