根本原因是拖拽时被拖元素仍参与文档流，导致剩余元素重排；解决方法是dragstart时设opacity:0.5、pointer-events:none、transform:translateZ(0)，并插入同尺寸占位符，dragover时根据主轴方向用坐标判断插入位置，iOS需手动模拟touch事件。
拖拽时Flex容器突然错位或元素跳动
根本原因是 flex 布局在拖拽过程中，被拖元素仍参与文档流（默认 position: static），而浏览器原生拖拽会临时将元素置顶并脱离布局上下文，导致剩余元素重排——视觉上就是“抽走一个，其他全挤过去”。
解决思路不是禁用 Flex，而是让被拖元素“视觉上还在原位但不占空间”：
- 拖拽开始（
dragstart）时，给目标元素设opacity: 0.5+pointer-events: none，再用transform: translateZ(0)触发硬件加速，避免重绘抖动 - 同时，用 JS 记录其原始索引，并在 Flex 容器中插入一个占位
<div class="placeholder"></div>，宽高与原元素一致（可通过getBoundingClientRect()获取） - 占位元素需设
flex: 0 0 auto+visibility: hidden，避免影响 flex 项目计算
如何让拖拽释放后自动插入到正确位置（而非追加到末尾）
原生 drop 事件只告诉你“落到了哪个容器”，不告诉你“该插在第几个子节点前”。必须靠坐标判断：监听 dragover，用 event.clientX / clientY 对比每个兄弟元素的 getBoundingClientRect() 中点，决定插入点。
关键代码逻辑：
立即学习“前端免费学习笔记（深入）”；
container.addEventListener('dragover', e => {
e.preventDefault(); // 必须，否则 drop 不触发
const rect = e.currentTarget.getBoundingClientRect();
const y = e.clientY - rect.top;
const children = Array.from(container.children).filter(el => !el.classList.contains('placeholder'));
let insertIndex = children.length;
<p>for (let i = 0; i < children.length; i++) {
const childRect = children[i].getBoundingClientRect();
const midY = childRect.top - rect.top + childRect.height / 2;
if (y < midY) {
insertIndex = i;
break;
}
}
// 记录 insertIndex，供 drop 时使用
});Flex方向变化（row ↔ column）对拖拽坐标判断的影响
横向排布（flex-direction: row）应比对 clientX 和元素中点横坐标；纵向（column）则必须改用 clientY 和中点纵坐标。硬编码 clientY 会导致横排时拖拽定位完全失灵。
稳妥做法：
- 读取容器 computed style 的
flexDirection，判断主轴方向 - 主轴为
row或row-reverse→ 用X坐标 + 元素left/width - 主轴为
column或column-reverse→ 用Y坐标 + 元素top/height - 注意
row-reverse下，插入顺序要倒过来处理（即从右往左比）
移动端 Safari 拖拽失效或卡顿
iOS Safari 对原生 drag API 支持极差，dragstart 可能根本不触发，且 dragover 频率极低。别依赖它。
替代方案是手动模拟：
- 监听
touchstart，记录起始位置和目标元素 - 在
touchmove中动态更新占位符位置（用transform: translateY()移动占位符，或实时调整插入索引） - 用
touchend替代drop，执行最终 DOM 插入 - 务必加
touch-action: none到容器，防止系统手势拦截
Flex 排序本身没问题，问题出在拖拽事件链——浏览器没给你机会触发，就得绕开它。这点容易被忽略，直到上线才发现 iOS 用户完全拖不动。
