uni-app 自由拖拽换位置功能

在 uni-app 中实现自由拖拽换位置的功能，可以通过监听触摸事件（如 touchstart、touchmove 和 touchend）来实现。以下是一个简单的代码示例，展示如何在 uni-app 中实现列表项的拖拽排序功能。

首先，我们假设有一个列表数据 items，每个列表项都有一个唯一的 id。

<template>
  <view class="container">
    <view
      v-for="(item, index) in items"
      :key="item.id"
      class="draggable-item"
      :style="{ top: item.top + 'px', left: item.left + 'px' }"
      @touchstart="handleTouchStart($event, index)"
      @touchmove="handleTouchMove($event, index)"
      @touchend="handleTouchEnd($event, index)"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', top: 0, left: 0 },
        { id: 2, name: 'Item 2', top: 0, left: 0 },
        // 更多项...
      ],
      draggingIndex: null,
      startY: 0,
      startX: 0,
    };
  },
  methods: {
    handleTouchStart(event, index) {
      this.draggingIndex = index;
      this.startY = event.touches[0].clientY;
      this.startX = event.touches[0].clientX;
    },
    handleTouchMove(event, index) {
      if (this.draggingIndex !== index) return;
      const moveY = event.touches[0].clientY - this.startY;
      const moveX = event.touches[0].clientX - this.startX;
      this.$set(this.items, this.draggingIndex, {
        ...this.items[this.draggingIndex],
        top: this.items[this.draggingIndex].top + moveY,
        left: this.items[this.draggingIndex].left + moveX,
      });
    },
    handleTouchEnd(event, index) {
      if (this.draggingIndex !== index) return;
      // 这里可以添加逻辑来处理拖拽结束后的位置更新，比如重新排序
      this.draggingIndex = null;
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.draggable-item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 5px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 100px;
}
</style>

请注意，上述代码仅实现了基本的拖拽效果，并没有处理拖拽结束后的位置更新逻辑（例如，判断拖拽到哪个位置后重新排序）。在实际应用中，你可能需要添加更多的逻辑来处理这些情况，比如碰撞检测、位置计算等。此外，由于 uni-app 支持多端运行，你可能还需要针对不同平台进行一些适配工作。