uniapp拖拽元素更换位置

要在uniapp中实现拖拽元素更换位置，可以使用以下步骤：

1. 在页面中创建需要拖拽的元素，并设置其拖拽事件。
2. 在拖拽事件中获取拖拽元素的位置信息，并在移动过程中实时更新其位置。
3. 在拖拽结束事件中获取拖拽元素当前位置，并计算出其应该移动到的位置。
4. 将拖拽元素移动到新位置，并更新其他元素的位置以保持布局的一致性。

以下是一个简单的示例代码，以实现拖拽元素更换位置：

<template>
  <view class="container">
    <view class="item" v-for="(item, index) in itemList" :key="item.id"
      :style="{ top: item.top + 'px', left: item.left + 'px' }"
      @touchstart="dragStart(index, $event)"
      @touchmove="dragMove(index, $event)"
      @touchend="dragEnd(index, $event)">
      {{ item.text }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, text: 'Item 1', top: 100, left: 100 },
        { id: 2, text: 'Item 2', top: 200, left: 100 },
        { id: 3, text: 'Item 3', top: 300, left: 100 },
      ],
      draggingIndex: -1,
      dragStartX: 0,
      dragStartY: 0,
    };
  },
  methods: {
    dragStart(index, event) {
      this.draggingIndex = index;
      this.dragStartX = event.touches[0].pageX;
      this.dragStartY = event.touches[0].pageY;
    },
    dragMove(index, event) {
      if (this.draggingIndex === index) {
        const offsetX = event.touches[0].pageX - this.dragStartX;
        const offsetY = event.touches[0].pageY - this.dragStartY;
        const item = this.itemList[index];
        item.top += offsetY;
        item.left += offsetX;
        this.dragStartX = event.touches[0].pageX;
        this.dragStartY = event.touches[0].pageY;
      }
    },
    dragEnd(index, event) {
      if (this.draggingIndex === index) {
        const item = this.itemList[index];
        const newIndex = this.findNewIndex(item);
        item.top = newIndex * 100 + 100;
        item.left = 100;
        this.itemList.splice(index, 1);
        this.itemList.splice(newIndex, 0, item);
        this.draggingIndex = -1;
      }
    },
    findNewIndex(item) {
      const newIndex = Math.round(item.top / 100);
      if (newIndex < 0) return 0;
      if (newIndex >= this.itemList.length) return this.itemList.length - 1;
      return newIndex;
    },
  },
};
</script>

在上述代码中，我们创建了一个包含三个元素的列表，并为每个元素添加了拖拽事件。在拖拽事件中，我们通过计算偏移量来实时更新元素的位置，并在拖拽结束时计算出元素应该移动到的位置，并更新其他元素的位置以保持布局的一致性。