unnapp 小程序长按拖动排序

在uniapp中实现长按拖动排序功能，可以使用<movable-area>和<movable-view>组件。以下是一个简单的示例：

<template>
  <view class="container">
    <movable-area class="drag-area" :style="{ height: list.length * 100 + 'rpx' }">
      <movable-view
        v-for="(item, index) in list"
        :key="item.id"
        class="drag-item"
        :y="index * 100"
        direction="vertical"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
      >
        {{ item.name }}
      </movable-view>
    </movable-area>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...
      ],
      startPos: 0,
      endPos: 0,
      isMoving: false,
    };
  },
  methods: {
    touchStart(e) {
      this.startPos = e.touches[0].pageY;
      this.isMoving = true;
    },
    touchMove(e) {
      if (this.isMoving) {
        this.endPos = e.touches[0].pageY;
        const delta = this.endPos - this.startPos;
        const from = Math.floor(delta / 100);
        if (from !== 0 && this.canMove(from)) {
          const dragged = this.list.splice(e.currentTarget.dataset.index, 1)[0];
          this.list.splice(e.currentTarget.dataset.index + from, 0, dragged);
        }
        this.startPos = this.endPos;
      }
    },
    touchEnd() {
      this.isMoving = false;
    },
    canMove(from) {
      const src = this.list.findIndex(item => item.id === this.currentId);
      const dest = src + from;
      return dest >= 0 && dest < this.list.length;
    },
  },
};
</script>
 
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
 
.drag-area {
  width: 100%;
}
 
.drag-item {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
</style>

在这个示例中，<movable-area>定义了一个拖动区域，<movable-view>是可拖动的列表项。通过监听触摸事件，我们可以计算用户的拖动距离，并在touchMove事件中移动列表项的位置。

注意：

1. 这个例子使用了pageY来计算位置差，因此假设所有的<movable-view>都有相同的高度。
2. 这个例子没有处理边界情况，比如当拖动到列表末尾时继续拖动。