drop事件不触发是因为目标元素未监听dragover并调用e.preventDefault()，这是浏览器启用投放许可的唯一前提；仅监听drop而忽略dragover会导致静默失败。

拖放功能在 JavaScript 中不是靠单个 API 实现的，而是由 dragstart、dragover、drop 等一整套事件协同完成；不阻止默认行为，drop 事件根本不会触发。

为什么 drop 事件不触发？

浏览器对 drop 有严格前提：目标元素必须监听 dragover 并调用 e.preventDefault()。否则，即使绑了 drop，它也永远不会执行。

• dragover 是唯一能“开启投放许可”的事件，缺它或漏掉 preventDefault，整个拖放链就断了
• 只监听 drop 不监听 dragover，控制台不会报错，但行为静默失败
• 若目标是
  等非可编辑元素，默认禁止投放，必须显式拦截 dragover

  如何在 dragstart 中传数据？

  dataTransfer 是唯一合法的数据载体，但它只支持字符串类型，且 MIME 类型会影响后续读取方式。

  • 用 e.dataTransfer.setData('text/plain', 'item-123') 写入最通用，兼容所有目标
  • 写入自定义类型如 'application/json' 后，在 drop 中需用 e.dataTransfer.getData('application/json') 精确匹配才能读出
  • 不要试图塞对象或数组进去——setData 会自动转成字符串，JSON 序列化得手动做：e.dataTransfer.setData('text/plain', JSON.stringify({id: 1, type: 'card'}))
  • 浏览器可能忽略未声明的 MIME 类型，稳妥起见优先用 'text/plain' 或 'text/uri-list'

  怎样让拖拽视觉反馈更自然？

  仅靠事件不够，需配合 CSS 和 dataTransfer.effectAllowed / dropEffect 控制光标和行为语义。

  

  java-api-doc-generator

  分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

  下载

  • 在 dragstart 设置 e.dataTransfer.effectAllowed = 'move'（可选值：'copy'、'link'、'move'、'all'）
  • 在 dragover 中根据业务逻辑设 e.dataTransfer.dropEffect = 'move'，否则光标可能显示为禁止符号
  • 用 :active 或 [draggable="true"]::after 做拖拽中样式不靠谱——应监听 dragstart 添加类，dragend 清除
  • Firefox 对 dataTransfer.setDragImage() 支持最完整，Chrome/Safari 需传入真实 DOM 元素（不能是伪元素），且尺寸建议 ≤ 128×128px

  drop 里怎么安全读取并处理数据？

  别假设 getData() 一定返回东西——用户可能从外部拖入文件、链接或纯文本，来源不可控。

  • 先检查 e.dataTransfer.types 数组，判断有哪些可用类型，再决定用哪个 key 调 getData()
  • 对文件拖放，要用 e.dataTransfer.files（FileList），不是 getData()；对 URL，优先试 getData('text/uri-list')
  • 从网页内拖拽时，getData('text/plain') 最可能有值；但若源端没调 setData，这里就是空字符串
  • 避免在 drop 中直接操作 e.target 的子节点结构——它可能是文字节点或不可变元素，应明确操作预期容器（如父级 ul）

  真正麻烦的从来不是绑几个事件，而是应对跨源拖拽、移动端兼容、焦点管理、键盘辅助（如按 Space 触发拖拽）这些边界情况；dataTransfer 的类型匹配和 preventDefault 的时机，稍错一点，整个流程就卡死无声。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南