Safari 拖拽排序异常源于 WebKit 内核对 draggable 的渲染缺陷，尤其在 fixed 容器、自动截图和坐标计算上失真；修复应优先手势模拟，次选 setDragImage + body 冻结 + DOM 定位。

Safari 中拖拽排序异常，核心不是代码写错了，而是 WebKit 内核对原生 draggable 和 HTML5 拖放事件存在已知渲染缺陷，尤其在 iOS/iPadOS 和较新 macOS Safari（15.4+）中表现明显。这不是兼容性“没跟上”，而是底层图层合成逻辑有硬伤。

Safari 拖拽排序失效的典型现象

• 在模态框（position: fixed 或高 z-index）里拖动列表项，结果把背后页面的 <p>、<div> 甚至整个滚动区域一起“拖出来”
• 拖拽过程中卡片突然跳位、错行、重叠，或释放后插到错误位置
• 同一套代码在 Chrome/Firefox 完全正常，唯独 Safari 失效或卡顿
• dragstart 触发了，但 drop 不触发，或 dataTransfer 数据为空

这些都指向同一个根源：WebKit 错误地将 drag image（拖拽预览图）锚定到根文档层，而非当前叠加容器，导致视觉反馈与 DOM 上下文脱节（Bug #153852，截至 2026 年 8 月仍未修复）。

Safari 拖拽异常的三大技术原因

• position: fixed 容器内拖拽捕获失效
  WebKit 无法正确隔离 fixed 层的拖拽事件范围，底层内容仍参与拖拽图像生成和坐标计算。

• dragstart 默认截图逻辑失控
  不调用 e.dataTransfer.setDragImage() 时，Safari 自动截取整个视口快照，把弹窗背后的内容一并“拖走”。

• Flex/Grid 布局 + 滚动容器下坐标判断失真
  clientY/clientX 在 Safari 中受缩放、滚动偏移、transform 影响更大，靠坐标算插入点极易出错。

  

  Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

  规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

  下载

实用修复策略（按推荐顺序）

• 优先弃用原生 drag API，改用手势模拟
  用 touchstart/touchmove（iOS）和 mousedown/mousemove（macOS）手动实现拖拽逻辑，配合 requestAnimationFrame 更新位置，完全绕过 WebKit 渲染层缺陷。

• 若必须用原生 drag，务必组合三重防护

  • dragstart 中调用 e.dataTransfer.setDragImage(new Image(), 0, 0) 抹掉默认截图
  • 拖拽开始时冻结 body 滚动（仅 iOS）：body.style.cssText = 'position: fixed; top: -' + window.pageYOffset + 'px; width: 100%; overflow: hidden;'
  • drop 时不依赖坐标，改用 DOM 结构定位：Array.from(container.children).indexOf(event.target) 或插入占位符后比对 getBoundingClientRect()

• 避免踩坑的细节约束

  • 不要给拖拽容器本身设 draggable="true"，只设在具体子项上
  • 动态渲染的列表（如 React/Vue）必须用事件委托绑定 dragstart，否则新节点无监听
  • dragend 必须恢复 body 样式并 window.scrollTo(0, scrollTop)，否则页面错位

不复杂但容易忽略