基于 uni-app + ＜movable-view＞拖拽实现的标签排序-适用于微信小程序、H5等多端

在实际业务中，我们经常遇到「标签排序」或「菜单调整」的场景。微信小程序原生的 movable-view 为我们提供了一个简单、高效的拖拽能力，结合 Vue3 + uni-app 的组合，我们可以实现一个体验良好的标签管理界面。

核心组件：、

1.每项数据结构加入 y 坐标

const itemHeight = uni.upx2px(110); // 每项高度，决定拖动步长

function initDragg(list) {
  return list.map((item, index) => ({
    ...item,
    y: index * itemHeight, // 初始位置
  }));
}

2. 拖动状态管理变量

const canDrag = ref(false);          // 当前是否允许拖动（长按才激活）
const draggingIndex = ref(-1);       // 当前拖动的 item 的 index

3.用户手指按下某项

4.进入拖动状态

function onTouchStart(index) {
  if (!canDrag.value) return;
  draggingIndex.value = index;
}

5.拖动过程中（自动触发）

function onChange(e, index) {
  const dy = e.detail.y;
  const targetIndex = Math.round(dy / itemHeight);
  
  if (targetIndex !== index && targetIndex >= 0 && targetIndex < groupList.value.length) {
    // 拖动项移到新位置
    const moved = groupList.value.splice(index, 1)[0];
    groupList.value.splice(targetIndex, 0, moved);
    draggingIndex.value = targetIndex;
  } else {
    // 仅移动视觉，不换位置
    groupList.value[index].y = dy;
  }
}

6.拖动结束

function onTouchEnd() {
  if (!canDrag.value) return;
  draggingIndex.value = -1;

  // 所有项重置为标准位置
  groupList.value.forEach((item, i) => {
    item.y = i * itemHeight;
  });

  // 同步顺序到后端
  sortLabelList(groupList.value);
  canDrag.value = false;
}

完整代码测试代码