JavaScript Academy · 课时

放置目标与 dataTransfer

Q: 「放置目标与 dataTransfer」这节课中我会学到什么？

接受放置操作并传输数据。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

接受放置操作并传输数据。

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

什么元素可以作为放置目标

默认情况下，元素会拒绝放置操作。要接受放置，必须同时在 dragover 和 drop 上阻止默认行为。这是最常见的陷阱。

通过 dragover 允许放置

除非您在 dragover 处理程序中调用 preventDefault()，否则浏览器会阻止放置操作。没有这一步，drop 事件永远不会触发。

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
  e.preventDefault(); // REQUIRED to allow drop
});

drop 事件

用户在有效目标上方释放项目时，会触发 drop。这里也要阻止默认行为（这样可以防止浏览器打开被放置的文件或网址），然后读取数据。

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  console.log("Dropped", id);
});

读取 dataTransfer

getData(format) 会获取在 dragstart 中存储的数据。格式字符串必须与设置时使用的字符串匹配。

const payload = e.dataTransfer.getData("text/plain");

移动元素

一种经典用法是：使用传输的 id，将被拖动的节点追加到放置区域中。

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);
});

多种数据格式

dataTransfer 可以同时保存多种格式，例如 text/plain 和 application/json，目标会读取它能够理解的格式。

e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));

设置 dropEffect

在 dragover 中，将 dropEffect 设置为 "copy"、"move" 或 "link"，以控制光标和操作语义。

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
});

effectAllowed 与 dropEffect

effectAllowed（由来源设置）声明允许哪些操作；dropEffect（由目标设置）从中选择一种操作。两者配合使用，可以显示正确的光标。

重新排序列表

将放置位置与插入操作结合起来，就能重新排列项目。请判断应将项目插入光标下方元素之前还是之后。

list.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  list.insertBefore(dragged, e.target);
});

确定放置目标

使用 e.target（指针下方的元素）和 closest()，在目标嵌套时找到相关容器。

zone.addEventListener("drop", (e) => {
  const slot = e.target.closest(".slot");
  if (slot) slot.appendChild(getDragged(e));
});

清除数据

dataTransfer.clearData() 会清空存储的数据；传入某种格式后，只会清除该格式的数据。无论如何，拖动结束后数据存储都会自动重置。

e.dataTransfer.clearData("text/plain");

快速检查

测试放置目标。

回顾：放置目标与 dataTransfer

您通过在 dragover 和 drop 上调用 preventDefault() 创建了放置区域，使用 getData 读取了有效载荷，移动并重新排列了元素，设置了 dropEffect，还处理了嵌套目标。下一步：视觉反馈。

常见问题解答

「放置目标与 dataTransfer」课时是免费的吗？

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

「放置目标与 dataTransfer」这节课中我会学到什么？

接受放置操作并传输数据。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「放置目标与 dataTransfer」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy