draggable="true"仅开启拖拽开关，需显式绑定dragstart事件、设置dataTransfer数据、防止默认行为且目标需监听dragover并preventDefault；移动端不支持原生drag/drop，须降级处理。

draggable="true" 只是打开拖拽开关，不配事件、不传数据、不阻止默认行为，拖拽一定失败。

dragstart 事件没触发？先看这三件事

元素光标变手形 ≠ dragstart 被触发。浏览器不会自动绑定事件，必须显式注册。

• draggable="true" 必须写在被拖元素上（
  ）， 或 即使加了也无效
• 必须用 addEventListener('dragstart', ...) 或内联 ondragstart 绑定回调；只设属性不写事件监听，dragstart 根本不会来
• event.dataTransfer.setData('text/plain', 'some-id') 必须在 dragstart 回调里执行，且 type 建议用 'text/plain' 或 'text/html' —— 自定义类型如 'mydata' 在 Firefox 中会静默失败
• 空
  没宽高时，浏览器判定“不可交互”，dragstart 不触发；加 min-height: 24px 或 padding: 4px 就能解决
• 检查是否被样式拦住：user-select: none 或 pointer-events: none 会让 mousedown 都失效，dragstart 更不可能触发

drop 事件不执行？关键在 dragover

drop 不执行，90% 是因为 dragover 没拦住浏览器默认拦截逻辑。它不是可选步骤，而是硬性前提。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 目标容器必须监听 dragover，且回调中必须调用 e.preventDefault() —— e.stopPropagation()、return false 都不行
• 只监听 drop 是无效的；浏览器在 dragover 阶段就决定是否允许投放，没 preventDefault()，drop 根本不会派发
• 目标容器若为空
  ，确认它没被 display: none 或 visibility: hidden 隐藏，否则无法命中
• Safari 对 effectAllowed 和 dropEffect 匹配更敏感：建议在 dragstart 里设 e.dataTransfer.effectAllowed = 'move'，在 dragover 里设 e.dataTransfer.dropEffect = 'move'

移动端完全不支持原生 drag/drop

iOS Safari 和 Android Chrome 均不触发 dragstart/drop 等事件。draggable="true" 在移动端基本失效，这不是兼容性问题，是平台级限制。

• 别直接照搬桌面代码；需降级为 touchstart/touchmove/touchend + CSS transform 手动模拟
• 或引入轻量库如 interact.js 或 sortablejs，它们内部已做平台兼容处理
• 若坚持用原生 API，至少检测 'ontouchstart' in window 并切换为点击+长按激活模式

drop 里拿不到正确目标？别依赖 event.target

drop 事件中的 event.target 可能是子元素（比如你拖到一个带文字的

，target 反而是里面 ），不是你绑定事件的容器本身。

• 用 event.currentTarget 获取你实际监听的父容器
• 或者把 drop 和 dragover 显式绑定到最外层容器（如 class="column"），避免事件冒泡干扰
• event.dataTransfer.getData('text/plain') 获取数据时，type 必须和 setData() 时一致，否则返回空字符串

真正麻烦的不是写几行事件监听，而是跨浏览器拖拽状态同步、释放位置计算精度、与滚动容器协同、以及键盘用户如何“拖拽”——这些细节往往第一次上线后才暴露出来。