uni-app跨端频道拖拽排序必须放弃sortablejs，改用touchstart/touchmove/touchend自定义实现：长按400ms激活、动态计算中线阈值交换、splice更新数组触发响应式、css transition做动画。
uni-app 里用 sortablejs 实现频道拖拽排序行不通
直接上结论：uni-app 的 WebView 环境（尤其是小程序端）不支持 SortableJS 依赖的原生 drag / drop 事件，H5 端勉强能跑但手势卡顿、iOS 微信里几乎失效。这不是配置问题，是底层事件模型不兼容。
真正能跨端稳定工作的，只有「手指按住长按 + 手势位移 + 松手交换」这一套自定义逻辑，核心靠 touchstart / touchmove / touchend 三个事件配合位置计算。
- 别在
onLoad里初始化拖拽监听，得等列表 DOM 渲染完成，建议用this.$nextTick包一层 - 每个频道项必须设唯一
data-index（或用index属性），不能只靠数组下标——因为排序过程中数组会变，下标会错乱 - 移动端 touch 坐标要减去元素 offsetTop/offsetLeft 才能算相对位置，否则跨屏拖拽时交换判断失准
uni-app 列表项怎么响应长按并进入拖拽态
uni-app 没有内置 longpress 事件穿透控制，直接写 @longpress 在某些安卓机上会和 click 冲突，导致点一下就触发拖拽。正确做法是手动实现「按住 400ms 以上才激活」：
// 模板中
<view class="channel-item" :data-index="index">
{{ item.name }}
</view>
-
onTouchStart里记下startTime = Date.now()和初始坐标startY -
onTouchEnd里判断Date.now() - startTime > 400，满足才设isDragging = true - 一旦进入拖拽态，后续
touchmove就只做位移计算，不再响应点击
怎么判断当前拖到哪个位置、触发交换
不是靠「松手时离谁近」，而是实时检测「当前拖拽项的中心 Y 坐标是否越过目标项的中线」。这个阈值必须动态算，不能写死 px，否则不同屏幕适配出问题：
- 遍历所有频道项的
boundingClientRect()，拿到每个的top和height - 当前拖拽项中心 Y =
currentTouchY；目标项中线 Y =item.top + item.height / 2 - 当
currentTouchY > item.top + item.height / 2且上一帧还没越过，就执行交换：把当前项从原位置 splice 出，插入到目标索引+1处 - 注意：交换后要立即更新所有项的 DOM 引用，否则下一帧
boundingClientRect拿到的是旧位置
uni-app 中数组重排后视图不更新或顺序错乱
常见错误是直接改原数组引用，比如 arr[i] = arr[j]; arr[j] = temp —— 这种操作 uni-app 的响应式系统捕获不到。必须用 splice 或 concat 这类明确变更数组的方法：
// ✅ 正确：触发响应式更新 const newArr = [...this.channelList]; const [moved] = newArr.splice(fromIndex, 1); newArr.splice(toIndex, 0, moved); this.channelList = newArr; <p>// ❌ 错误：视图不更新 this.channelList[fromIndex] = this.channelList[toIndex]; this.channelList[toIndex] = moved; </p>
- 如果用了
vuex或pinia管理频道数据，记得在 mutation/action 里也用同样方式替换数组，不能直接赋值 - 交换动画靠
transform: translateY()实现，但 uni-app 的animationAPI 在小程序里兼容性差，建议用 CSS transition 配合动态 class 控制
最麻烦的其实是 iOS 下 touchmove 触发频率低，导致快速滑动时交换判定丢失——得加一个「防抖窗口」，比如 300ms 内只允许一次交换，避免连击误判。
