uni-app拖拽排序列表 uni-app如何实现长按拖动排序-uni-app-PHP中文网

uni-app长按拖拽排序最稳方案是手动接管touchstart/touchmove事件：300ms长按防误触，touchmove中按需查相邻项位置计算目标索引，松手后生成新数组整体赋值更新，避免splice索引错乱和响应式丢失。

uni-app 长按拖拽排序用 `touchstart` + `touchmove` 最稳

纯靠 draggable 属性或第三方插件在 uni-app 里基本不可靠——小程序平台不支持原生 draggable，h5 上行为不一致，app 端权限和手势冲突多。真要稳定拖拽排序，得自己接管触摸事件流。

核心是：长按触发锁定（加延时防误触），移动时动态计算目标索引，松手后更新数组顺序。别碰 dragstart/dragend，它们在 uni-app 多端表现极差。

用 setTimeout 在 touchstart 里设 300ms 阈值，超时才进入拖拽态，避免点击误判
拖动中持续监听 touchmove，通过 event.touches[0].pageY 和列表项 boundingClientRect 计算当前悬停位置
每次位置变化只重新计算一次目标 index，避免高频 setState 导致卡顿
松手（touchend 或 touchcancel）立即清空拖拽态，防止残留状态影响下一次操作

uni-app 列表项定位必须用 `uni.createSelectorQuery()`

直接用 offsetTop 或 getBoundingClientRect() 在小程序里拿不到真实位置——组件未渲染完成、自定义组件嵌套、使用了 scroll-view 都会导致数值为 0 或错位。

必须用 uni.createSelectorQuery() 主动查每个 item 的布局信息，且要在 nextTick 或 setTimeout 后执行，确保 DOM 已更新。

给每个 view 加唯一 id，比如 item-{{index}}，方便 query 定位
不要在 touchstart 时一次性查完所有位置——列表长时性能差，改在 touchmove 中按需查相邻 3–5 项即可
查到的 top 是相对于 viewport 的，需减去页面滚动偏移（uni.getSystemInfoSync().windowHeight 不适用，要用 uni.pageScrollTo 相关逻辑反推）

数组重排别用 `splice` 直接挪，用 `Array.from` + `map` 更安全

拖拽过程中频繁修改原数组，尤其跨多端时，Vue 响应式可能丢失更新，或触发不必要的 diff。直接 splice 移动元素容易索引错乱，特别是从后往前拖时。

推荐生成新数组，再整体赋值，让响应式系统清晰感知变更。

const newArray = Array.from(oldArray)
const [movedItem] = newArray.splice(fromIndex, 1)
newArray.splice(toIndex, 0, movedItem)
this.list = newArray // 触发完整更新

别在 splice 后还对原数组做 push/unshift —— 状态不可控
如果启用了 trackBy（如 :key="item.id"），确保 id 唯一且不变，否则列表会复用错误节点
App 端 iOS 有时会因动画未结束就更新数组，导致视觉跳动，可在 touchend 后加 setTimeout(() => { this.list = newArray }, 16) 对齐帧率