0Pricing
JavaScript Academy · 课时

拖动过程中的视觉反馈

在拖动操作期间设置元素样式。

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

视觉反馈为何重要

良好的拖放交互会告诉用户当前发生了什么：哪个项目正在移动、可以放在哪里，以及放置是否有效。没有反馈时，交互会让人感觉像是失效了。

设置被拖动项目的样式

在 dragstart 时降低来源的不透明度或缩放来源，让用户看清自己选中了哪个项目。

item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));

dragenter 事件

被拖动的项目进入潜在目标时，会触发 dragenter。您可以利用它高亮显示区域。

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
  zone.classList.add("drag-over");
});

dragleave 事件

项目离开目标时，会触发 dragleave。在这里移除高亮效果。

zone.addEventListener("dragleave", () => {
  zone.classList.remove("drag-over");
});

闪烁问题

子元素也会触发 dragenter/dragleave，从而导致闪烁。使用计数器或检查 relatedTarget 可以保持高亮稳定。

let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });

在放置时重置

始终在 drop 处理程序中清除高亮状态，因为成功放置时可能不会触发 dragleave。

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  depth = 0;
  zone.classList.remove("drag-over");
});

自定义拖动图像

在 dragstart 中使用 setDragImage(element, offsetX, offsetY)，可以用任意元素替换默认的 ghost。

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

通过 dropEffect 控制光标

光标样式（copy 加号、移动箭头和禁止放置）由在 dragover 中设置的 dropEffect 决定。请使用 "none" 拒绝无效放置。

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

显示放置占位符

在可排序列表中，将占位元素插入预计的放置位置，让用户准确看到项目将要放在哪里。

function showPlaceholder(beforeEl) {
  list.insertBefore(placeholder, beforeEl);
}

计算插入位置

将指针的 Y 坐标与每个项目的垂直中点进行比较，以决定应将项目放在它之前还是之后。

function getAfterElement(container, y) {
  const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
  return items.find((el) => {
    const box = el.getBoundingClientRect();
    return y < box.top + box.height / 2;
  });
}

无障碍反馈

仅依靠视觉提示会排除键盘用户和屏幕阅读器用户。请将拖放与 ARIA 实时播报及键盘替代操作结合起来，以满足无障碍需求。

快速检查

测试视觉反馈。

回顾：视觉反馈

您为被拖动的项目设置了样式，使用 dragenter/dragleave 高亮显示区域，通过 depth 计数器解决了闪烁问题，自定义了拖动图像，通过 dropEffect 控制了光标，并显示了放置占位符。下一步：拖入文件。

常见问题解答

「拖动过程中的视觉反馈」课时是免费的吗？

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

「拖动过程中的视觉反馈」这节课中我会学到什么？

在拖动操作期间设置元素样式。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「拖动过程中的视觉反馈」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 让元素可拖动
  2. 放置目标与 dataTransfer
  3. 拖动过程中的视觉反馈
  4. 将文件拖入页面
← 返回 JavaScript Academy