加了 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 更早版本压根不响应——必须显式写 <code>draggable="true" - 普通元素（如
<div>、<code><span></span>）默认不可拖，哪怕加了属性，若没监听dragstart并调dataTransfer.setData()，浏览器会直接放弃拖拽流程 - 父级元素有
pointer-events: none或遮罩层（比如 loading 蒙层），会拦截鼠标事件，导致dragstart根本不触发 - 元素本身没有尺寸（比如空
<div> 且无宽高/内边距/内容），视觉上“拖不了”——鼠标连 hover 都难触发 <h3> <code>dragstart里必须做三件事这是拖拽启动的关键一步，漏掉任意一项，后续
drop就拿不到数据：- 必须调用
e.dataTransfer.setData('text/plain', 'some-value')—— 即使只传空字符串也要写，否则拖拽行为会被中止 - 推荐用自定义 MIME 类型传结构化数据，比如
e.dataTransfer.setData('application/json', JSON.stringify({id: 1, type: 'card'}))，避免和浏览器原生拖链接/图片的行为冲突 - 不能在
dragstart外提前设置数据，dataTransfer对象只在该事件生命周期内可写
目标区域必须同时处理
dragover和dropdrop事件不会自动触发，它依赖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这类兼容库。桌面端测试也别信开发者工具的设备模拟，务必插鼠标真机验证。 - 必须调用
