原生拖放API中drop不触发的根本原因是浏览器默认阻止dragover事件，必须在dragover中调用event.preventDefault()；dataTransfer仅支持字符串，推荐用ID查表还原数据；非draggable元素需手动设置draggable="true"；移动端需touch事件模拟。
原生 JavaScript 的拖放（Drag and Drop）API 表面简单，实际容易卡在 dragover 事件被忽略、drop 不触发、或数据传不进目标元素上——根本原因不是写法错，而是浏览器默认阻止了这些事件的默认行为。
为什么 drop 事件完全不触发？
因为浏览器对 dragenter 和 dragover 默认不做任何事，更不会让 drop 发生。你必须显式调用 event.preventDefault()，而且得在 dragover（以及可选的 dragenter）里调用。
-
dragover是唯一必须阻止默认行为的事件；漏掉它，drop永远不会触发 -
dragenter阻止与否不影响drop，但能控制“进入目标区域”的视觉反馈（比如加 class） - 不能只在
drop里preventDefault()——太晚了，浏览器已经跳转或下载了
dataTransfer 只能传字符串？怎么传 DOM 元素或对象？
dataTransfer 的 setData() 方法只接受字符串类型值，但你可以用它传递标识符（如 ID 或索引），再在 drop 时查表还原真实数据。
- 不要尝试
setData('text/plain', JSON.stringify(obj))后在drop里JSON.parse()——跨域或安全策略可能拦截 - 推荐做法：拖拽开始前把源元素的引用缓存在全局 Map 或数组中，
setData('text/id', 'item-123')，drop时用该 ID 查找对应数据 - 如果只是移动 DOM 节点，直接
event.target.appendChild(draggedElement)更可靠，无需走dataTransfer
如何让非 draggable="true" 元素可拖？
只有设置了 draggable="true" 的元素（或表单控件、图片等原生可拖元素）才能触发拖拽起点。但你可以用 JS 主动触发：
立即学习“Java免费学习笔记（深入）”；
- 监听
mousedown，然后调用element.setPointerCapture()+element.draggable = true动态开启（注意后续要恢复） - 更稳妥的做法：在目标元素上加
draggable="true"，再用 CSSuser-select: none避免文字被误选 - 移动端不支持原生 drag API，必须用
touchstart/touchmove模拟——这点常被忽略，导致 H5 页面拖放失效
最易被绕过的细节是：拖放过程中若鼠标移出窗口（比如切到别的标签页），dragend 仍会触发，但 drop 已经没了；此时应靠 dragleave 或定时器兜底清理状态。
