draggable设为true却无法拖拽，是因为仅声明可拖拽状态，必须绑定dragstart事件并调用dataTransfer.setData()，且目标区域需在dragover中preventDefault。

draggable 属性设为 true 却无法拖拽？检查是否绑定了 dragstart 事件

HTML 元素的 draggable 属性只是开启“可被拖拽”的**声明状态**，不是自动启用完整拖拽逻辑。浏览器看到 draggable="true" 后，只会在鼠标悬停时显示拖拽光标（如抓手图标），但真正触发拖拽流程必须靠 JavaScript 的 dragstart 事件——否则松开鼠标就什么也不会发生。

常见错误现象：draggable="true" 写了，元素也能高亮、能显示拖拽光标，但拖不动；控制台无报错，也收不到 drag 相关事件。

• 必须为该元素添加 addEventListener('dragstart', handler)
• handler 中至少要调用 event.dataTransfer.setData()，否则部分浏览器（如 Chrome）会静默取消拖拽
• 若元素是图片或链接，原生行为可能干扰，建议加 event.preventDefault() 在 dragstart 中

为什么 img 和 a 标签设置 draggable=true 后仍不响应？

浏览器对 和 有默认拖拽行为：图片拖拽会触发下载，链接拖拽会触发导航。即使你显式写了 draggable="true"，这些原生行为仍会抢占事件流，导致自定义逻辑失效。

解决方法是主动拦截并重置：

• 给 加 ondragstart="return false;" 或在 JS 中 preventDefault()
• 确保 dataTransfer.setData('text/plain', '...') 被调用，哪怕只是占位字符串
• 注意：Safari 对 的 draggable 支持较弱，建议统一用
  包裹后操作

  拖拽目标区域收不到 dragenter/dragover？别忘了 preventDefault

  目标容器（即你想把元素拖进去的地方）必须监听 dragenter 和 dragover，且在这两个事件中调用 event.preventDefault() —— 否则浏览器会按默认行为拒绝投放，连 dragenter 都可能不触发。

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  • dragenter：仅需一次，用于标记“进入有效区域”，可在这里加样式提示
  • dragover：必须持续阻止默认行为，它是浏览器判断“此处是否允许投放”的关键依据
  • 漏掉 dragover.preventDefault() 是 90% 的“拖进去了没反应”问题根源

  移动端无法拖拽？draggable 属性基本无效

  draggable 是桌面端 HTML5 Drag & Drop API 的一部分，**所有主流移动浏览器（iOS Safari、Chrome for Android）都不支持该 API**。你在手机上看到的“能拖”效果，大概率是某框架（如 SortableJS）用 touchmove + transform 模拟出来的，和 draggable 属性无关。

  如果你需要跨端一致的拖拽体验：

  • 放弃原生 draggable，改用 touchstart/touchmove/touchend 手动实现，或引入轻量库（如 interact.js）
  • 不要在移动端依赖 dataTransfer，它在 iOS 上完全不可用
  • 测试时务必真机验证，模拟器的 touch 行为常有偏差

  真正麻烦的从来不是设 draggable="true" 这一行，而是后续那一整套事件链里任何一个环节没配对、没阻止、没 setData —— 尤其是 dragover.preventDefault() 这个容易被忽略的“门禁开关”。