加了 draggable="true" 仍拖不动，主因是浏览器默认策略拦截：需显式设 draggable="true"、监听 dragstart 并调 dataTransfer.setData()、dragover 中持续 e.preventDefault()，且目标区须有尺寸；移动端原生不支持，须用 touch 事件模拟或兼容库。
设 draggable="true" 只是让元素“能被抓起来”，不是拖拽功能的全部；不配事件、不调 dataTransfer.setData()、不在 dragover 里 e.preventDefault()，拖拽就静默失败。
为什么加了 draggable="true" 还是拖不动
常见原因不是属性写错了，而是被浏览器默认策略拦住了：
-
draggable="auto"不可靠：Chrome/Safari 对<div>忽略它，Firefox 直接无视，Edge/IE 更早版本压根不响应——必须显式写draggable="true" - 普通元素（如
<div>、<span>）默认不可拖，哪怕加了属性，若没监听dragstart并调dataTransfer.setData()，浏览器会直接放弃拖拽流程 - 父级元素有
pointer-events: none或遮罩层（比如 loading 蒙层），会拦截鼠标事件，导致dragstart根本不触发 - 元素本身没有尺寸（比如空
<div>且无宽高/内边距/内容），视觉上“拖不了”——鼠标连 hover 都难触发
dragstart 里必须做三件事
这是拖拽启动的关键一步，漏掉任意一项，后续 drop 就拿不到数据：
- 必须调用
e.dataTransfer.setData('text/plain', 'some-value')—— 即使只传空字符串也要写，否则拖拽行为会被中止 - 推荐用自定义 MIME 类型传结构化数据，比如
e.dataTransfer.setData('application/json', JSON.stringify({id: 1, type: 'card'}))，避免和浏览器原生拖链接/图片的行为冲突 - 不能在
dragstart外提前设置数据，dataTransfer对象只在该事件生命周期内可写
目标区域必须同时处理 dragover 和 drop
drop 事件不会自动触发，它依赖 dragover 的持续许可：
立即学习“前端免费学习笔记（深入）”；
-
dragover事件必须每次触发都调e.preventDefault()，只在dragenter里拦一次不够 - 仅在
drop回调里preventDefault()是无效的，此时浏览器早已按默认行为（比如打开 URL）处理了 - 如果目标区需要视觉反馈（如高亮边框），可在
dragenter加 class、dragleave移除，但核心逻辑仍落在dragover的拦截上 - 注意：目标元素需有明确尺寸或内容，否则
dragover可能无法命中
移动端完全不支持这套原生 API；iOS Safari 和 Android Chrome 均未实现 draggable 在触摸场景下的稳定行为。真实项目中，只要涉及手指拖拽，就得换方案——用 touchstart/touchmove + CSS transform 模拟，或引入 interact.js 这类兼容库。桌面端测试也别信开发者工具的设备模拟，务必插鼠标真机验证。
