移动端原生 drag/drop 事件链（dragstart、dragover、drop）被主流浏览器静默屏蔽，必须用 touchstart/touchmove/touchend 手动实现或采用 interact.js 等库降级处理。
移动端 draggable="true" 根本不触发 dragstart？这不是代码问题
所有主流移动浏览器（iOS Safari、Chrome for Android、Samsung Internet）在 2026 年仍**完全不支持原生 drag/drop 事件链**。这不是兼容性 bug，而是 W3C 规范允许的降级行为——dragstart、dragover、drop 在触摸环境下被浏览器引擎层静默屏蔽。你检查了 draggable="true"、绑了事件、写了 setData()，但控制台连一次 dragstart 都没打印，就是这个原因。
- 别用
console.log在dragstart里埋点来“验证是否生效”，它根本不会执行 -
user-select: none或pointer-events: none等样式排查，在移动端毫无意义——事件压根没进队列 - 试图用
dataTransfer.setDragImage()做拖拽预览？移动端该 API 返回undefined或直接报错
必须降级：用 touchstart/touchmove/touchend 手动模拟
真实项目中，只要目标用户含移动端，就得放弃原生 draggable，改用触摸事件+CSS定位手动实现。核心是三步：记录起始位置、实时更新元素 left/top、松手后计算落点并更新 DOM。
- 在
touchstart中获取event.touches[0].clientX/Y，存为初始偏移，并给被拖元素加position: fixed+z-index - 在
touchmove中动态设置element.style.left = (x - offsetX) + 'px'，避免抖动需event.preventDefault()阻止页面滚动 -
touchend时用document.elementFromPoint()或遍历容器边界判断落点，再执行插入/交换逻辑 - 视觉反馈建议用半透明
opacity: .7+transform: scale(0.95)，比依赖dataTransfer更可控
用 interact.js 这类库不是偷懒，是避坑刚需
自己手写触摸拖拽容易漏掉边界判断、多点触控冲突、滚动容器内坐标偏移等问题。interact.js（v1.10+）或 sortablejs（v1.15+）已内置平台检测：if ('ontouchstart' in window) 自动切换事件源，且处理了 iOS Safari 的 touchcancel 惯性问题。
- 引入后只需写
interact('.draggable').draggable({ onmove: handleDragMove })，不用区分桌面/移动 - 它内部用
requestAnimationFrame节流touchmove，避免卡顿；而手写时容易忽略这点 - 注意：不要混用原生
draggable="true"和 interact.js——移动端会因事件冲突导致touchstart被吞
别让“看起来像拖拽”误导你做无用功
移动端所谓“拖拽体验”，本质是点击激活 + 弹窗选择目标位置，或长按后进入排序模式。强行模拟桌面拖拽动作，反而增加误操作率。比如列表排序场景，iOS 上用户更习惯长按项 → 出现浮动菜单 → 点击“移到顶部/底部”，而不是手指按住拖动。
- 如果产品必须支持拖拽，优先保证桌面端完整功能，移动端明确标注“仅桌面可用”并提供替代路径
- 测试时务必在真机上验证：模拟器可能部分触发事件，但真机 Safari 17+ 完全无响应
- Electron 或 WebView 场景下，即使写了
webPreferences: { nodeIntegration: true }，原生 drag API 依然受限——这是 Blink/WebKit 内核层限制，绕不过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
