要用 pointer 事件手动模拟拖拽，配合 transform + transition 实现平滑过渡：禁用原生 drag，用绝对定位影子元素跟随鼠标，实时调整其他项 translatey 腾位，过渡作用于 transform/opacity，时长设 150–250ms，结束清空 transform。
拖拽时列表项位置跳变，怎么让移动过程有平滑过渡
纯 HTML5 drag API 本身不提供视觉插值，拖拽过程中 li 元素实际位置由 DOM 顺序决定，而浏览器默认是“瞬移”——你松手前它还在原位，松手后立刻跳到新位置，没有中间态。要实现视觉上的平滑过渡，必须绕过原生拖拽的视觉表现，改用 pointerdown/pointermove 手动模拟，并结合 CSS transform + transition 控制位移。
关键点：禁用原生 dragstart 视觉反馈（比如加 draggable="false"），改用绝对定位的“影子元素”跟随鼠标，同时实时调整其他项的 transform: translateY() 来腾出空位。
- 不要给被拖项设
position: relative后再用top/left移动——会触发重排，卡顿 - 所有过渡必须作用在
transform和opacity上，这两者可 GPU 加速 - 过渡时长建议设为
150ms到250ms，太长拖拽感迟滞，太短看不出效果 - 记得在拖拽结束时清空所有
transform，否则后续排序逻辑可能错乱
Vue/React 里用 useDraggable 或 v-movable 为什么动画还是卡
第三方库如 @vueuse/core 的 useDraggable 或 react-dnd 默认只处理位置逻辑，不接管 CSS 过渡。它们通常靠 key 重渲染或 ref 重排 DOM，但没配 transition-group 或 animate.css 类，视觉上仍是硬切。
以 Vue 为例，必须显式包裹 <transition-group></transition-group>，且每个子项需带唯一 key（不能用索引），并设置 name 对应 CSS 类名：
<transition-group name="list" tag="ul"><li v-for="item in list" :key="item.id">{{ item.text }}</li>
</transition-group>
然后定义 CSS：
.list-move {
transition: transform 0.2s ease;
}
- React 中同理，用
framer-motion的<motion.ul></motion.ul>比react-transition-group更稳，它自动处理 layout motion - 如果用了
virtual scroll（如vue-virtual-scroller），过渡动画基本失效——虚拟滚动靠transform: translateY复用 DOM，和排序动画冲突，得关掉虚拟滚动或换用react-window的VariableSizeList配合手动 layout 动画
SortableJS 开启 animation 参数没反应
SortableJS 的 animation 选项（如 animation: 150）只控制“排序完成后的回弹/归位”动画，不是拖拽过程中的实时过渡。它底层仍靠 DOM 插入 + transform 补间，但前提是你的 CSS 必须存在对应类名：
.sortable-ghost {
opacity: 0.6;
}
.sortable-chosen {
opacity: 0.8;
}
.sortable-drag {
transform: scale(1.02);
}
若没生效，大概率是漏了这三类样式，或用了 Shadow DOM 导致样式未穿透。
-
animation值单位是毫秒，设成0就完全关闭动画 - 开启
fallbackOnBody: true可能导致 ghost 元素脱离列表容器，CSS 选择器匹配失败 - 和
scrollSensitivity一起用时，快速拖拽靠近边缘会触发滚动，此时动画帧易被丢弃，建议把scrollSpeed调低（如10）
移动端拖拽列表动画手指一松就闪回原位
移动端 touch 事件默认有 300ms 延迟，且 touchmove 容易被浏览器滚动劫持。直接套用 PC 端 pointer 逻辑，在 iOS Safari 或 Android Chrome 上常出现“拖着走，一抬手瞬间闪回”——本质是 touchend 未正确捕获，或 preventDefault() 没加对地方。
必须做三件事：
- 给拖拽容器加
touch-action: none，禁止浏览器默认滚动/缩放行为 - 在
touchstart和touchmove中调用e.preventDefault()，但仅限目标元素（避免影响页面其他滚动） - 用
requestAnimationFrame节流touchmove里的位置更新，否则高频 touch 事件会导致 transform 计算滞后
更稳妥的做法是用 Hammer.js 或 @use-gesture/vanilla 封装手势，它们已处理好移动端兼容性边界。
最常被忽略的一点：动画依赖的 transform 值必须用 px 或 rem 显式单位，不能传数字（如 translateY(20) 是无效的，必须写 translateY(20px)），这点在动态拼接 style 字符串时极易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
