搜索标签拖拽排序必须用touchstart+touchmove手动计算X坐标与标签中线位置交换，因movable-area不支持v-for动态列表、无法获取索引、横向滚动适配差且多端不兼容。
直接说结论：搜索标签的拖拽排序不能靠 draggable 属性或 movable-area，必须用 touchstart + touchmove 手动算位置交换，否则小程序端根本不动、H5 端松手就复位、真机必卡。
为什么搜索标签不能用 movable-area
搜索标签通常是横向滚动的单行列表（比如「前端」「Vue」「uni-app」），movable-area 要求固定宽高且只支持单个 movable-view，你没法让它“感知相邻标签位置”——它返回的是像素坐标 x/y，不是数组索引。更关键的是：movable-view 不支持 v-for 动态生成，你一写 v-for 渲染多个，编译后事件丢失、样式错乱、iOS 微信直接不响应 touch。
- 横向滚动场景下，
movable-area的width很难动态匹配内容总长，设小了拖不出边界，设大了留白 - 标签宽度不固定（文字长度不同），
movable-view必须显式设width和height，否则默认 10px，视觉完全错位 -
change回调只触发一次松手事件，无法实时知道“当前拖到第几个标签之间”，也就没法插入正确位置
touchmove 中怎么准确定位目标索引
横向标签拖拽的关键不是比 Y 坐标，而是比 X 坐标与每个标签的 left + width 区间。但不能缓存 DOM 位置——用户可能滚动、增删标签、切换 Tab，位置随时变。每次 touchmove 都得重查。
- 用
uni.createSelectorQuery()查每个标签容器（加唯一id="tag-{{index}}"），调boundingClientRect()获取left和width - 计算每个标签的中线：
midX = rect.left + rect.width / 2，只在手指 X 坐标跨过中线时触发一次交换（防抖） - 记录上一次交换目标
this.lastSwappedIndex，避免touchmove高频重复调splice - 别用
event.touches[0].pageX——小程序里恒为 0；统一用event.touches[0].clientX
松手后如何安全更新数组顺序
搜索标签常带删除按钮或点击跳转，splice 直接改原数组容易导致响应式失效或索引错乱，尤其从右往左拖时，删掉一个后后面所有索引前移，插错位置。
- 先深拷贝：
const newList = JSON.parse(JSON.stringify(this.tagList))（含对象时必需） - 取出被拖项：
const [movedItem] = newList.splice(this.dragIndex, 1) - 插入目标位置：
if (this.toIndex > this.dragIndex) { newList.splice(this.toIndex - 1, 0, movedItem) } else { newList.splice(this.toIndex, 0, movedItem) } - 最后整赋值：
this.tagList = newList，触发完整 diff，避免节点复用错乱 - 务必给标签加稳定
:key="item.id"，别用:key="index"，否则拖完顺序变了但 DOM 没重排
横向滚动容器怎么防止拖拽时页面抢事件
搜索标签常放在 scroll-view 或可滚动区域里，iOS 小程序会优先处理滚动，导致 touchmove 失效或卡顿。
- 拖拽开始时禁用滚动：
scroll-x="false"（横向）或scroll-y="false"（纵向），松手再恢复 - 标签容器加
catchtouchmove="true"（小程序），@touchmove.prevent（H5/APP），阻止事件冒泡到父滚动层 - Android 真机可能双触发
touchstart，开头加if (this.isDragging) return+touchend清状态 - 节流
touchmove到 16ms（≈60fps），用setTimeout+ 标志位，别用 Lodash——增加包体积且小程序兼容性差
最易被忽略的是：横向标签拖拽时，touchmove 中每次都要重新查 DOM 位置，缓存一次就失效；还有就是松手瞬间的 toIndex 计算，必须基于当前所有标签的实时 boundingClientRect，而不是靠位移累计——手指滑太快，累计值早就不准了。
