原生 draggable 在桌面端（macos/windows/linux）基本一致，但在 ios 和 android 上完全不可用，必须降级为 touch 模拟；桌面端需注意 safari 对 effectallowed 的严格匹配、firefox/safari 对 setdragimage() 的限制，所有浏览器均要求 dragover 中调用 preventdefault()；移动端须用 touchstart/touchmove/touchend 手动模拟，并确保状态原子性。
原生 draggable 在 macOS、Windows、Linux 桌面端基本一致，但 iOS 和 Android 上完全不可用——这不是“适配问题”，而是平台级缺失，必须降级。
macOS / Windows / Linux 桌面端表现基本统一
Chrome、Firefox、Edge（含新旧版）在三大桌面系统中对 draggable="true" 的基础行为一致：光标变拖拽样式、触发 dragstart/dragover/drop 事件链、支持 dataTransfer.setData()。差异仅存在于细节：
- Safari（macOS）对
effectAllowed和dropEffect匹配更严格，不设或不一致会导致光标显示禁止图标（❌）且drop静默失败 - Firefox 对
setDragImage()要求图像已加载且宽高 > 0，Chrome 允许隐藏元素，Safari 只认<img>或<canvas></canvas> - 所有桌面浏览器都要求目标容器在
dragover中调用event.preventDefault()，漏掉就无法投放
iOS Safari 和 Android Chrome 原生 drag/drop 不触发
截至 2026 年 9 月，iOS Safari（包括 iPadOS）、Android Chrome、主流 WebView（如微信内置浏览器）均不派发 dragstart、dragend、drop 等任何拖拽事件。draggable="true" 在这些环境里等同于无意义属性。
- 检测方式必须是
'ontouchstart' in window，不能靠 UA 字符串；matchMedia('(hover: hover)')也不可靠 - 强行启用会导致文字选择、页面缩放、长按延迟等副作用，不是 bug，是渲染层未实现该规范
- 别尝试“兼容补丁”——interact.js、SortableJS 等库内部早已放弃原生 API，改用
touchstart/touchmove/touchend+transform手动模拟
跨平台代码结构必须分层，不能混写
一个函数里同时处理 dragstart 和 touchstart 是反模式。真实项目应明确分离路径：
- 桌面端走完整原生链：
dragstart→setData()+effectAllowed，dragover→preventDefault()+dropEffect，drop→ DOM 插入 + 数据更新 - 移动端走 touch 降级：
touchstart记录起始位置和目标 ID，touchmove节流更新transform位移，touchend触发插入逻辑；滚动容器需额外处理scrollTop自动修正 - React/Vue 中，
key必须绑定稳定 ID，避免 touch 模拟时因 DOM 渲染滞后导致indexOf错位
真正难的不是事件监听，而是状态原子性
松手那一帧，DOM 移动、数组重排、滚动位置修正、焦点迁移（尤其无障碍场景）必须全部完成。桌面端靠事件顺序尚可控制，移动端 touch 模拟中，touchend 和 requestAnimationFrame 的时序错乱极易导致视觉与数据脱节——这里没有银弹，只有逐帧验证和 fallback 日志。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
