uni-app 拖拽按钮排序功能实现 wx ios android

在实现 uni-app 中的拖拽按钮排序功能时，可以利用 Vue.js 的数据绑定和事件处理机制。以下是一个简化的代码示例，展示了如何在微信小程序、iOS和Android平台上实现这一功能。

1. 数据准备

首先，在你的 data 中定义一个数组，用于存储按钮的信息：

data() {
    return {
        buttons: [
            { id: 1, name: 'Button 1' },
            { id: 2, name: 'Button 2' },
            { id: 3, name: 'Button 3' },
        ],
        dragSrcIndex: null,  // 拖拽源索引
        dragOverIndex: null, // 拖拽目标索引
    };
}

2. 模板部分

在模板中，使用 v-for 渲染按钮，并绑定拖拽相关事件：

<view class="container">
    <view
        v-for="(button, index) in buttons"
        :key="button.id"
        class="button-item"
        :draggable="true"
        @touchstart="handleTouchStart(index, $event)"
        @touchmove="handleTouchMove($event)"
        @touchend="handleTouchEnd"
    >
        {{ button.name }}
    </view>
</view>

3. 事件处理

接下来，在 methods 中实现拖拽逻辑：

methods: {
    handleTouchStart(index, event) {
        this.dragSrcIndex = index;
        event.touches[0].clientY; // 记录起始Y坐标
    },
    handleTouchMove(event) {
        if (this.dragSrcIndex === null) return;
        let moveY = event.touches[0].clientY;
        // 这里可以添加逻辑来判断是否应该触发排序操作，比如移动距离等
        // 此处省略具体判断逻辑
        this.dragOverIndex = this.getDragOverIndex(moveY); // 获取目标索引
    },
    handleTouchEnd() {
        if (this.dragSrcIndex !== null && this.dragOverIndex !== null && this.dragSrcIndex !== this.dragOverIndex) {
            [this.buttons[this.dragSrcIndex], this.buttons[this.dragOverIndex]] = [this.buttons[this.dragOverIndex], this.buttons[this.dragSrcIndex]]; // 交换元素
        }
        this.dragSrcIndex = null;
        this.dragOverIndex = null;
    },
    getDragOverIndex(clientY) {
        // 根据clientY计算目标索引，此处为简化示例，省略具体实现
        // 需要根据具体布局和触摸位置来计算
        return 1; // 示例返回值
    }
}

4. 样式部分

最后，为按钮添加一些基本样式，确保它们可以正确显示：

.container {
    display: flex;
    flex-direction: column;
}

.button-item {
    padding: 10px;
    margin: 5px 0;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

这个示例代码展示了如何在 uni-app 中实现拖拽按钮排序的基本逻辑。实际应用中，你可能需要根据具体需求调整触摸事件的判断和索引计算逻辑。