让元素可拖动
启用拖动并处理拖动事件。
让元素可拖动 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
HTML 拖放 API
原生的拖放 API允许用户抓取元素并将其放到其他位置。它由事件驱动：源元素会触发拖动事件，放置目标也会触发自己的事件。无需使用库。
draggable 属性
默认情况下，只有链接和图像可以拖动。添加 draggable="true" 即可让任意元素支持拖动。
<div draggable="true" id="card">Drag me</div>在 JS 中设置 draggable
您可以通过 draggable 属性在脚本中切换此行为。
const card = document.getElementById("card");
card.draggable = true;dragstart 事件
dragstart 会在拖动开始的瞬间触发。您可以在这里记录正在拖动的内容。
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});使用 dataTransfer 携带数据
事件会提供 dataTransfer。请在 dragstart 中使用 setData(format, value) 附加载荷，使其随拖动过程传递。
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});drag 事件
元素移动期间会持续触发 drag。请谨慎使用，因为它每秒可能触发多次。
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});dragend 事件
用户释放鼠标时会触发 dragend，无论放置是否成功。请使用它重置源元素的样式。
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});标记源元素
一种常见模式是：在 dragstart 时添加一个类，并在 dragend 时移除它，从而使被拖动的项目变暗或突出显示。
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));允许的效果
在 dragstart 中设置 effectAllowed，声明哪些操作有效："copy"、"move"、"link" 或它们的组合。
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});触摸设备注意事项
原生 API 在移动设备上的触摸支持有限。对于触摸优先的应用，请考虑使用指针事件或专用库；原生 API 在桌面设备上更具优势。
禁用文本选择
拖动时可能会意外选中文本。一条简短的 CSS 规则即可让拖动过程保持整洁。
/* CSS */
.draggable { user-select: none; }快速检查
测试可拖动功能的基础知识。
回顾：让元素支持拖动
您使用 draggable="true" 启用了拖动，处理了 dragstart/drag/dragend，通过 dataTransfer.setData 附加了载荷，设置了 effectAllowed，并为源元素设置了样式。下一步：放置目标。
常见问题解答
「让元素可拖动」课时是免费的吗？
是的 — 「让元素可拖动」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「让元素可拖动」这节课中我会学到什么？
启用拖动并处理拖动事件。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「让元素可拖动」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。