默认配置在多数真实场景下会失效或错位：swapthreshold默认30px导致小卡片无法触发交换，未设ghostclass导致无占位提示，animation:0引发chrome丢帧跳变，且动态增删项后需手动更新disabled状态或重新初始化。
直接用 Sortable.create() 初始化就行，但默认配置在多数真实场景下会失效或错位——不是库有问题，是它默认行为和前端常见结构不兼容。
为什么 new Sortable() 后拖不动或松手就回弹
根本原因是 swapThreshold 和 ghostClass 没调。默认 swapThreshold: 30 要求鼠标覆盖目标项 30px 才触发交换，小卡片、紧凑列表、高 DPI 屏幕下几乎无法触发；而没设 ghostClass 会导致拖拽时看不到占位提示，用户不知道“松手后会插在哪”。
- 把
swapThreshold改成10或15，尤其当列表项高度 ≤ 48px 时必须调低 - 必须显式传
ghostClass: "sortable-ghost"，并在 CSS 中定义该类（如.sortable-ghost { opacity: 0.6; }） - 别漏掉
animation: 150：Chrome 下快速拖拽会丢帧，animation: 0（默认值）反而导致位置跳变
表单字段拖拽后 input 值丢失怎么办
DOM 移动本身不会清空 <input> 的 value，但如果你用了 innerHTML = ... 重写整个容器，或者在 Vue/React 中绕过框架直接操作 DOM，就会丢状态。SortableJS 默认用 before()/after() 移动节点，是安全的；但一旦你手动干预插入逻辑，就容易踩坑。
- 确保没在
onEnd里执行类似container.innerHTML = newHTML这种整段重写 - 表单字段含
<input>、<select></select>时，加preventOnFilter: false，否则点击输入框会误触发拖拽 - 如果用了
filter选项（比如过滤掉按钮），记得配preventOnFilter: false，不然点按钮也会拖起来
Vue/React 中拖完顺序没更新数据源
DOM 排序了，但数组没变，下次 re-render 就打回原形。这不是 SortableJS 的问题，是绑定方式错了。它只管 DOM，不管你的 JS 数组。
- Vue 中监听
sort事件（不是end），在回调里用this.$nextTick(() => { /* 更新 this.list */ })，避免 DOM 还没完成移动就取children - React 中用
onEnd回调，必须函数式更新：setItems(items => arrayMove(items, oldIndex, newIndex))，不能items.splice(...); setItems(items) - 所有列表项的
key必须稳定，禁用index作 key；否则拖拽后组件实例被复用错位，状态全乱
移动端 Safari 上完全没反应
iOS / iPadOS Safari 硬性禁用原生 draggable 和所有 drag 事件，Sortable.create() 在里面根本不会触发 dragstart，控制台也不报错——这是 UA 层面的屏蔽，没法 hack。
- 检测
'ontouchstart' in window，真机上直接降级为「长按 → 弹出位置选择菜单」或「上下箭头按钮」 - 非降级场景下，启用
forceFallback: true让 SortableJS 切换到 touch 模拟模式（它内部用touchstart/touchmove+transform） - 别在 iOS Safari 里调试
dragstart，它压根不发，浪费时间
最常被忽略的是：动态增删列表项后，Sortable 实例不会自动感知，得手动调 sortable.option("disabled", false) 或重新初始化——否则新加的项不可拖，删掉的项还留着旧绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
