移动端不支持原生drag API，需用touch事件+transform手动模拟拖拽，通过getBoundingClientRect()校准坐标实现精准落点判定。
draggable="true"在iOS和Android上根本不会触发dragstart
这不是代码写错了，是浏览器引擎层主动屏蔽——W3C规范没强制要求移动端实现drag API，所有主流移动浏览器（iOS Safari、Chrome for Android、Samsung Internet）都选择不支持。你加了draggable="true"，绑了ondragstart，控制台也无报错，但dragstart事件就是不派发，连console.log都不会执行。
别花时间查CSS是否拦住了pointer-events，也别怀疑事件绑定方式；只要检测到'ontouchstart' in window为true，就该立刻放弃原生drag/drop链路。
- 用
if ('ontouchstart' in window) { /* 切换交互模式 */ }做平台判断，别等真机测试才发现失效 - 桌面端调试时加
console.log('dragstart fired')有用，但在手机上永远看不到这行输出 -
dataTransfer对象在移动端压根不初始化，e.dataTransfer.setData()会静默失败，不报错也不抛异常
移动端必须用touch事件+transform手动模拟拖拽
核心思路是：用touchstart记录初始位置和元素尺寸，touchmove实时更新transform: translate(x, y)，touchend做落点判定和DOM插入。这绕过了原生drag API，完全可控。
关键细节不是“怎么动”，而是“怎么准”：目标区域的命中判定不能只靠clientX/Y，要结合getBoundingClientRect()做偏移校准，尤其当画布有scale()、scroll或嵌套overflow: hidden容器时。
立即学习“前端免费学习笔记（深入）”；
- 拖拽中禁用
touch-action: none以外的值，否则touchmove可能被浏览器吞掉 - 避免在
touchmove里频繁读取offsetTop/Left，改用getBoundingClientRect()一次获取布局信息 - 落点计算别直接用
e.touches[0].clientX，先减去容器boundingClientRect.left/top - 拖拽元素建议加
will-change: transform，防止安卓低端机卡顿
drop区域为什么在移动端永远收不到投放
因为drop事件本身就不在移动端存在。你监听ondrop，它永远不会来；dragover.preventDefault()也毫无意义——这些事件根本不会被派发。
所谓“投放”，在移动端其实是touchend时对当前触摸坐标做碰撞检测：遍历所有可放置容器，用element.getBoundingClientRect()判断坐标是否落在其内。这个过程没有浏览器自动介入，全靠你手写逻辑。
- 别给目标容器设
ondrop，那是桌面端专属，移动端写了也白写 - 容器若用了
transform: scale(0.8)，getBoundingClientRect()返回的是缩放后尺寸，需额外除以scale系数 - 滚动容器中做落点判定，得加上
window.scrollY和container.scrollTop偏移 - 空
<div>没有宽高，<code>getBoundingClientRect()返回{ width: 0, height: 0 }，无法命中——至少加min-height: 24px要不要引入interact.js这类库
如果你的拖拽场景涉及排序、连接线、约束边界或嵌套容器，引入
interact.js是合理选择；它内部已处理了touch/mouse双路径、autoScroll防溢出、dropzone匹配等细节。但要注意它默认开启autoScroll，在固定高度滚动容器中可能导致意外滚动。如果只是简单列表项重排或模块拖入画布，手写
touchstart/touchmove/touchend更轻量、更可控，也更容易调试——毕竟你清楚每一步坐标怎么算、DOM怎么插。- 用
interact(target).draggable({ onmove: handleDragMove })时，event.clientX/Y仍是视口坐标，仍需手动转为容器内坐标 - 它不自动解决
transform缩放带来的坐标偏移，该校准还得你自己做 - 别忽略
interact.js的preventDefault策略：某些版本在onmove里调e.preventDefault()会影响页面滚动，得配allowFrom限定拖拽区域
真正难的不是让元素动起来，而是让“动的位置”和“放的位置”在各种缩放、滚动、嵌套场景下始终一致。移动端拖拽失效不是漏写了某行代码，而是整套事件模型根本不适配触摸协议——接受这点，才能跳过无谓排查，直接进真实解法。
- 用
