在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事件中移动列表项的位置。
注意：
- 这个例子使用了
pageY来计算位置差，因此假设所有的<movable-view>都有相同的高度。 - 这个例子没有处理边界情况，比如当拖动到列表末尾时继续拖动。