核心问题是DOM结构变动与样式规则、布局模型不匹配，需在目标容器监听dragover并调用e.preventDefault()、用closest('li')精准定位插入点、确保CSS布局兼容（如触发BFC）、移动端降级使用SortableJS。
多列表拖拽后样式错乱，核心问题不在“拖拽动作”本身，而在于DOM结构变动与样式规则、布局模型之间的不匹配。常见于 HTML5 原生拖放、Ant Design 表格、Bootstrap 列表或自定义排序组件中。错乱表现包括：行高塌陷、手柄列偏移、项闪退、插入点不准、移动端无响应等。
dragover 被默认阻止，导致悬停失效
浏览器对 dragover 事件有默认拦截行为（防止文件下载等），若未显式阻止，默认放置逻辑不触发，视觉上就是“拖不进去”或“目标区域没反应”：
- 必须在目标容器（如
<ul>或<tbody>）上监听dragover并调用e.preventDefault() - 不要写
e.stopPropagation()——它会中断嵌套层级的事件冒泡，影响手柄定位或表格行识别 - 空列表区域需设
min-height（如min-height: 20px），否则无法捕获 dragover
插入位置计算错误，引发 DOM 错位
HTML5 拖放不自动决定插入点，靠手动判断光标位置。若逻辑粗略（比如只用 e.target === li），极易插错位置：
- 用
e.target.closest('li')获取真正被拖入的项，避免点击内部 span/div 导致误判 - 以目标
li的中线为界：e.clientY > rect.top + rect.height / 2才插入到下一项之前 - 插入前务必比对
dragged === targetLi，防止自我插入引发渲染异常
布局模型与浮动/弹性/网格不兼容
很多错乱本质是 CSS 布局机制冲突。例如：
- 浮动列表中拖拽后父容器高度坍缩 → 需让
<ul>触发 BFC（overflow: hidden或display: flow-root） - Bootstrap
.list-group-item默认带margin和width: 100%→ Flex/Grid 下会挤压换行，须重置为margin: 0; width: auto - Ant Design 表格中
rowKey与数据源字段名不一致 → 拖拽时找不到对应行索引，导致样式错乱或行隐藏
移动端适配缺失，拖拽链路断裂
原生 dragstart 在 iOS Safari 和部分安卓 WebView 中默认禁用，且 touch 事件未映射到 drag 体系：
- CSS 需启用拖拽支持：
* { -webkit-user-drag: element; }（iOS 16.4+ 支持） - 更稳妥方案是降级使用
SortableJS等库，它内部已封装 touchmove → drag 模拟逻辑 - 避免依赖
dragenter做状态切换——它触发不稳定，应统一用dragover维护悬停态
