vue触屏拖拽排序实现

以下是实现Vue触屏拖拽排序的步骤：

1. 使用flex布局和v-for指令来创建卡片列表。
2. 绑定触摸事件，包括touchstart、touchmove和touchend。
3. 在touchstart事件中，记录手指初始位置和卡片的初始位置。
4. 在touchmove事件中，计算手指移动的距离，并将卡片相应地移动。
5. 在touchend事件中，根据手指的最终位置和移动距离，确定卡片的最终位置。
6. 根据移动的距离和方向，判断是否需要删除或插入卡片，并更新卡片列表。
7. 完整的代码示例如下：

<template>
  <div class="card-list">
    <div
      v-for="(card, index) in cards"
      :key="card.id"
      :style="{ transform: `translateY(${card.position}px)` }"
      @touchstart="onTouchStart(index)"
      @touchmove="onTouchMove($event, index)"
      @touchend="onTouchEnd(index)"
    >
      {{ card.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { id: 1, name: 'Card 1', position: 0 },
        { id: 2, name: 'Card 2', position: 100 },
        { id: 3, name: 'Card 3', position: 200 },
      ],
      touchStartY: 0,
      touchStartPos: 0,
    };
  },
  methods: {
    onTouchStart(index) {
      this.touchStartY = event.touches[0].clientY;
      this.touchStartPos = this.cards[index].position;
    },
    onTouchMove(event, index) {
      const touchY = event.touches[0].clientY;
      const moveY = touchY - this.touchStartY;
      this.cards[index].position = this.touchStartPos + moveY;
    },
    onTouchEnd(index) {
      const touchY = event.changedTouches[0].clientY;
      const moveY = touchY - this.touchStartY;
      const threshold = 50; // 移动距离阈值

      if (moveY > threshold) {
        // 向下移动，插入到下一个位置
        this.cards.splice(index + 1, 0, this.cards[index]);
        this.cards.splice(index, 1);
      } else if (moveY < -threshold) {
        // 向上移动，插入到上一个位置
        this.cards.splice(index - 1, 0, this.cards[index]);
        this.cards.splice(index + 1, 1);
      } else {
        // 没有超过阈值，恢复原始位置
        this.cards[index].position = this.touchStartPos;
      }
    },
  },
};
</script>