uniapp 左右拖动div换位

可以使用uni-app自带的swiper组件实现左右拖动div换位的效果。具体做法如下：

1. 在页面中添加swiper组件，并设置为横向滚动。

<swiper class="swiper-container" :duration="300" :autoplay="false" :circular="true" :previousMargin="0" :nextMargin="0" :touchable="true" :touchMoveStopPropagation="true" :touchEndStopPropagation="true" :threshold="50" :pagination="{clickable: true}" :navigation="{nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}">
  <swiper-item v-for="(item, index) in items" :key="index">
    <div class="item-wrapper" @touchstart="touchstart(index)" @touchmove="touchmove(index)" @touchend="touchend(index)">
      {{item}}
    </div>
  </swiper-item>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</swiper>

2. 在样式文件中设置swiper-container的宽度和高度，以及item-wrapper的样式。

.swiper-container {
  width: 100%;
  height: 200px;
}

.item-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background-color: #fff;
}

3. 在页面组件的methods中添加touchstart、touchmove和touchend方法，来处理拖动换位的逻辑。

methods: {
  touchstart(index) {
    this.startIndex = index;
    this.startX = event.touches[0].clientX;
  },
  touchmove(index) {
    let moveX = event.touches[0].clientX;
    let distance = moveX - this.startX;
    if (Math.abs(distance) > 50) {
      // 滑动距离大于50时，才允许换位
      let moveIndex = this.startIndex + (distance > 0 ? -1 : 1);
      if (moveIndex >= 0 && moveIndex < this.items.length) {
        // 更新items数组中的数据
        let temp = this.items[this.startIndex];
        this.items.splice(this.startIndex, 1);
        this.items.splice(moveIndex, 0, temp);
        // 更新startIndex
        this.startIndex = moveIndex;
        // 更新startX
        this.startX = moveX;
      }
    }
  },
  touchend(index) {
    // 手指离开时，停止滑动
    this.$refs.swiper.stopAutoplay();
  }
}

这样，就可以实现左右拖动div换位的效果了。