HTML Academy · 课时

draggable 属性与 dragstart 事件

让元素可拖动并响应 dragstart

第 1 / 4 课13 个步骤

draggable 属性与 dragstart 事件 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

可拖拽属性

设置 draggable="true" 后，任何元素都可以成为拖拽源。链接和图像默认可拖拽；其他元素（div、li、span）则需要显式设置该属性。设置 draggable="false" 可让元素不参与原生拖拽。

<div draggable="true" id="card">Drag me</div>

拖拽开始事件

用户开始拖拽时，源元素会触发拖拽开始事件。这是初始化拖拽的地方：记录正在移动的项目，可选择设置其样式，并将数据写入目标会读取的 dataTransfer 对象。

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

没有拖拽开始事件就不会发生任何操作

如果将元素标记为可拖拽，却从未处理拖拽开始事件，浏览器仍会拖动一个幽灵图像，但不会设置任何数据，因此大多数放置目标都会拒绝放置操作。请始终将可拖拽属性与拖拽开始事件监听器配套使用，至少存储一个标识符。

设置 effectAllowed

在拖拽开始事件中设置 e.dataTransfer.effectAllowed = "move" 可以限制操作：复制、移动、链接、复制移动、全部或无。这会影响浏览器显示的光标，以及目标稍后可以设置的 dropEffect。

添加视觉提示

为源元素添加一个 CSS 类，使其在拖拽时显示为变暗状态：card.classList.add("dragging")。在拖拽结束事件中移除该类，这样无论放置成功还是用户按 Escape 取消，样式都会被清除。

自定义拖拽图像

默认情况下，浏览器会拖动源元素的半透明快照。可以使用 e.dataTransfer.setDragImage(node, offsetX, offsetY) 覆盖默认图像——传入一个隐藏的 DOM 元素或图像对象，即可在光标处显示自定义预览。

const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

拖拽结束事件

dragend 会在拖拽完成后于源元素上触发，无论是成功放置、放置到无效目标，还是取消操作。请使用它进行清理，例如移除拖拽类、隐藏幽灵预览以及恢复不透明度。

检测取消操作

在拖拽结束事件中检查 e.dataTransfer.dropEffect。如果值为“无”，表示放置没有发生（目标拒绝了操作、用户按下了 Escape，或将内容放到了页面之外）。否则，它会等于放置目标选择的效果（移动、复制或链接）。

触摸设备上的拖拽

原生拖放以桌面设备为主。在触摸设备上，如果没有兼容填充或基于指针事件的替代方案，该接口几乎无法正常工作。对于适合移动设备的重新排序界面，建议使用 SortableJS 或拖放工具包等库，它们可以抽象统一两种事件模型。

可访问性注意事项

原生拖放无法通过键盘访问——仅使用键盘的用户无法重新排序项目。请始终提供替代方式：方向键处理程序、上移/下移按钮，或由 aria 属性控制的重新排序对话框。拖放应当是增强功能，而不是替代方案。

禁用浏览器默认行为

可拖拽元素中的文本选择可能会干扰拖拽。请在源元素上应用 CSS user-select: none 和 -webkit-user-drag: element，让浏览器拖动元素而不是选择其中的文本。

知识检查

既然仅设置 draggable="true" 属性就能让元素可拖拽，为什么通常仍然必须为它添加拖拽开始事件监听器？

在交互式课程中回答

总结

将源元素设置为可拖拽，并使用拖拽开始事件填充 dataTransfer、设置 effectAllowed，还可以选择自定义拖拽图像。配合拖拽结束事件清理样式。为可访问性提供键盘替代方案，并考虑为触摸设备使用兼容填充。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「draggable 属性与 dragstart 事件」课时是免费的吗？

是的 — 「draggable 属性与 dragstart 事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「draggable 属性与 dragstart 事件」这节课中我会学到什么？

让元素可拖动并响应 dragstart 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「draggable 属性与 dragstart 事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy