html5拖拽失败主因是dragstart未绑定或datatransfer未设值，且dragover必须调用preventdefault；原生可拖元素需禁用并包裹处理，动态元素要确保dom挂载后绑定事件。
dragstart 事件没绑定或被阻止了
HTML5 拖拽不是“加个 draggable="true" 就能动的，核心是 dragstart 必须被监听并设置有效拖拽数据。常见错误是只写了 draggable="true"，但没在 JS 里调用 event.dataTransfer.setData() —— 浏览器会直接忽略这次拖拽。
-
dataTransfer.setData()至少要设一次，类型建议用"text/plain"或"text/uri-list"，避免用自定义 MIME 类型（兼容性差） - 如果绑定了
dragstart但没写event.preventDefault()在dragover上，拖入目标区时会失败（浏览器默认禁止放置） - 别在
dragstart里异步取数据再 set ——dataTransfer只在事件触发瞬间生效，异步赋值无效
dragover 默认行为被阻止但没显式调用 preventDefault
这是最隐蔽的卡点：目标元素必须在 dragover 事件中调用 event.preventDefault()，否则浏览器认为“不允许放置”，光标会变禁用符号，拖拽直接中断。
- 仅靠 CSS
drag-over类名或ondragover属性不生效，必须有 JS 处理函数且含event.preventDefault() - 不能只在父容器上监听
dragover就完事 —— 如果目标是子元素（比如列表项），需确保事件能到达它（注意pointer-events: none或visibility: hidden会拦截） - Chrome/Firefox 对
dragover的preventDefault要求严格；Safari 有时允许省略，但别依赖
draggable 元素是图片、链接或表单控件
原生可拖拽元素（如 <img alt="HTML5DragandDrop拖不动_HTML5拖拽事件不触发解决技巧【解答】" >、<a></a>）自带拖拽逻辑，会干扰自定义行为。例如点击图片后拖出的是图片 URL，而不是你期望的业务 ID。
- 给
<img alt="HTML5DragandDrop拖不动_HTML5拖拽事件不触发解决技巧【解答】" >或<a></a>加draggable="false"，再在外层包裹一层<div draggable="true"> <li>禁用原生拖拽后，务必重新绑定 <code>dragstart并手动setData，否则拖不动 -
<input>、<textarea></textarea>默认不可拖拽，强行加draggable="true"在多数浏览器中无效，应换为非表单容器 - 确认元素已挂载到 DOM 再绑定 —— 不要用
DOMContentLoaded就急着遍历querySelectorAll，可能节点还没生成 - 用事件委托时，代理元素必须是
dragstart的合法目标（即祖先链上不能有pointer-events: none） - React/Vue 等框架中，避免在组件卸载后还试图调用
removeEventListener（可能报错），但更关键的是确保挂载时监听器已就位
事件监听器绑定时机或作用域不对
DOM 动态插入的元素，如果在插入前就绑定了事件，或用了事件委托但 selector 不匹配，dragstart/dragover 根本不会触发。
立即学习“前端免费学习笔记（深入）”；
dragover 中那行 event.preventDefault() —— 它不像错误信息那样抛出来，只是让拖拽静默失效。另外，dataTransfer 的数据类型和设置时机，比想象中更敏感。
