移动端浏览器默认不支持HTML5拖拽API，需通过draggable="true"声明、touch-action控制、preventDefault阻止滚动，并用drag-drop-touch等Polyfill模拟事件流，且drop区须同步preventDefault。
移动端浏览器（尤其是 iOS Safari 和部分 Android WebView）默认不支持原生 HTML5 Drag & Drop API，根本原因是 dragstart、dragover、drop 等事件在触摸环境下被禁用，且 event.dataTransfer 在 touch 事件中为 null 或只读。不能靠简单监听 touchstart 就复用桌面逻辑——必须用语义对齐、行为模拟的方案来桥接。
确保基础可拖拽属性正确声明
所有需拖拽的元素必须显式设置 draggable="true" 属性（不是 JS 赋值），这是触发底层拖拽机制的前提。动态插入的元素也要在插入 DOM 后立即补上该属性，并绑定事件：
<div class="item" draggable="true" data-id="1">内容</div>- 避免写
element.draggable = true—— 它只影响渲染层，无法激活拖拽引擎 -
dragstart中必须调用e.dataTransfer.setData()，哪怕只是setData('text/plain', '')，否则拖拽静默失败
强制阻止默认滚动并控制触摸行为
移动端拖拽常被页面滚动干扰，需从 CSS 和事件两层抑制：
- 为可拖拽元素加
touch-action: none，防止手指滑动时触发页面滚动 - 为放置区（droppable）设
touch-action: manipulation，保留缩放/点击能力但禁用拖拽干扰 - 在
touchstart阶段就调用e.preventDefault()（针对目标元素），避免滚动抢占
用专用 Polyfill 替代手动实现
自行基于 touch 事件模拟 drag/drop 极易出错（坐标跟踪不准、dataTransfer 模拟缺失、drop 触发时机错乱）。推荐使用成熟轻量库：
立即学习“前端免费学习笔记（深入）”；
-
drag-drop-touch：无依赖、自动注入事件代理、兼容原有 HTML 结构 - 安装：
npm install drag-drop-touch - 初始化：
enableDragDropTouch()即可让所有draggable元素在触屏端正常工作 - 它会自动处理：touchstart → dragstart 模拟、touchmove → dragover 触发、touchend → drop 精准派发，并确保
getData()可用
drop 区域必须双重阻止默认行为
即使用了 polyfill，drop 仍不触发？大概率是目标元素没正确响应 dragover：
-
dragover和drop两个事件都必须同步调用e.preventDefault() - 异步调用（如
setTimeout）无效，浏览器会在事件流结束前拦截 - 视觉反馈建议用
dragenter/dragleave切换 class，而非在dragover中频繁操作 DOM
