draggable=”true”需配合dragstart中setdata()、dragover中prEventdefault()及排除user-select/pointer-events干扰，三者缺一不可。
draggable 属性设了但拖不动？检查这三点
html 元素加了 draggable="true" 却没法拖，大概率不是属性没写对，而是缺了关键配套动作。浏览器默认只允许图片、链接、选中文本这三类内容原生拖放，其他元素即使设了 draggable="true"，也只会“看起来可拖”，实际触发不了 dragstart 事件。
- 必须手动监听
dragstart事件，并在其中调用event.dataTransfer.setData()（哪怕只是塞个空字符串） -
draggable="true"只控制“能否被鼠标选中发起拖拽”，不负责数据传递或目标区接收逻辑 - CSS 里如果写了
user-select: none或pointer-events: none，会直接拦截拖拽起点，优先排查这些样式
拖到目标区域没反应？dropzone 不是万能解
别指望 dropzone 属性能自动让元素接受拖放——它已被废弃多年，现代浏览器基本无视。真正起作用的是显式监听 dragover 和 drop 事件，并阻止默认行为。
-
dragover事件必须调用event.preventDefault()，否则浏览器认为“此处不可投放”，连drop都不会触发 -
drop事件里用event.dataTransfer.getData()取数据，注意类型要和setData()时一致（比如都用"text/plain"） - 目标容器若含子元素，
dragover可能冒泡触发多次，建议在父容器统一处理，避免重复 preventDefault
拖放跨 iframe 或跨窗口失败？dataTransfer 有隔离限制
从一个 iframe 拖进另一个 iframe，或者从网页拖进 electron 的 webview，dataTransfer 中的数据会被清空——这是浏览器安全策略强制的，不是代码写错了。
- 跨上下文拖放时，
dataTransfer.types可能只剩["text/plain"]，原始自定义类型丢失 - 可行方案：拖拽开始前，把必要数据存到全局变量或
sessionStorage；在drop事件里读取，再清理 - Electron 场景下，可用
webContents.send()+ipcRenderer.on()绕过限制，但需主进程做中转
移动端拖放几乎不可靠？别硬刚，换交互逻辑
ios safari 和 android chrome 对 drag 系列事件支持极差：触摸开始后常直接触发长按菜单，dragstart 很难捕获，drop 更是经常不触发。这不是你代码的问题，是平台限制。
立即学习“前端免费学习笔记（深入）”；
- 移动端建议放弃原生 drag API，改用
touchstart/touchmove/touchend模拟拖动逻辑 - 如需视觉反馈（比如半透明跟随效果），用
position: fixed+ 动态更新left/top，别依赖dataTransfer.setDragImage()（移动端基本无效） - 如果必须兼容，至少给移动端降级为点击+弹窗选择目标，而非强求拖放
拖放看似简单，但每个环节都卡在“浏览器默认行为”和“安全策略”的缝隙里。最常被忽略的是：dragstart 里不调 setData()，dragover 里不调 preventDefault()，以及想当然认为移动端能跑通——这三处一漏，整个流程就静默失败。