加了 draggable="true" 仍拖不动，因浏览器仅对图片、链接、选中文本开放原生拖放；需监听 dragstart 并调用 setdata，且 dragover 必须每次 preventdefault()，移动端应避免使用原生 drag 事件。

draggable="true" 只是拖拽的起点，不是完整功能。不配事件、不设数据、不拦默认行为，元素就“拖不动”或“放不下”。

为什么加了 draggable="true 还是拖不动

浏览器默认只对图片、链接、选中文本开放原生拖放权限；其他元素即使写了 draggable="true"，也仅改变光标样式，dragstart 事件根本不会触发。

• 必须显式监听 dragstart，并在其中调用 e.dataTransfer.setData('text/plain', '...') —— 即使传空字符串也不可省略
• draggable="auto" 不可靠：Chrome/Safari 对 <div> 忽略它，Firefox 直接无视 <li>父级有 <code>pointer-events: none 或遮罩层（比如 loading 蒙层），会拦截鼠标事件，导致 dragstart 完全不执行
• 元素无尺寸（空 <div> 且无宽高/内边距/内容），鼠标 hover 都难触发，更别说拖拽 <h3> <code>dragover 里不写 preventDefault() 就白搭

  drop 事件不会自动触发，它完全依赖 dragover 的持续许可。只在 dragenter 里拦一次、或只在 drop 回调里 preventDefault()，都无效。

  

  HTML汇报生成器

  🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

  下载
  • dragover 事件必须每次触发都执行 e.preventDefault()
  • 目标容器需有明确尺寸或内容，否则 dragover 可能无法命中
  • 若目标区含子元素，dragover 可能冒泡多次，建议统一绑定到父容器处理

  移动端别碰原生 draggable

  iOS Safari 和 Android Chrome 对 drag 系列事件支持极差：触摸开始常直接触发长按菜单，dragstart 难捕获，drop 经常静默失败。

  • 不是你代码的问题，是平台限制
  • 真实项目中必须换方案：用 touchstart/touchmove/touchend 模拟拖动逻辑
  • dataTransfer.setDragImage() 在移动端基本无效，视觉反馈建议用 position: fixed + 动态更新 left/top

  最易被忽略的是：跨 iframe 或 Electron webview 场景下，dataTransfer 数据会被清空，类型只剩 ["text/plain"]。这不是 bug，是安全策略强制隔离 —— 需提前把关键数据存进 sessionStorage 或走 IPC 中转。