uni-app 实现拖拽排序功能，可左右上下拖拽，类似支付宝界面

在 uni-app 中实现类似支付宝界面的拖拽排序功能，可以使用 vue-draggable 插件。这是一个基于 SortableJS 的 Vue 组件，支持多方向拖拽排序。以下是一个简单的实现示例：

步骤一：安装 vue-draggable

首先，在你的 uni-app 项目中安装 vue-draggable：

npm install vuedraggable --save

步骤二：在页面中引入并使用 vue-draggable

在你的页面组件中，引入并使用 vue-draggable。假设你有一个列表需要实现拖拽排序功能。

<template>
  <view class="container">
    <draggable v-model="items" @end="onDragEnd" :move="checkMove" :axis="'both'">
      <view v-for="(item, index) in items" :key="item.id" class="item">
        {{ item.name }}
      </view>
    </draggable>
  </view>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // 更多项目...
      ]
    };
  },
  methods: {
    onDragEnd(event) {
      console.log('拖拽结束', event);
      // 可以在这里处理拖拽结束后的逻辑，如保存排序结果到服务器
    },
    checkMove(evt) {
      // 自定义移动规则，可选
      // 返回 false 可以阻止移动
      return true;
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.item {
  width: 90%;
  margin: 10px auto;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}
</style>

解释

1. 安装 vue-draggable：通过 npm 安装插件。
2. 引入并使用 vue-draggable：在组件中引入并使用 draggable 组件。
3. 数据绑定：使用 v-model 绑定需要排序的列表数据。
4. 事件处理：监听 end 事件处理拖拽结束后的逻辑。
5. 自定义移动规则：checkMove 方法可以自定义移动规则，返回 false 可以阻止移动。
6. 样式：简单的样式定义，使每个拖拽项居中并有一些间距。

通过以上代码，你可以在 uni-app 中实现类似支付宝界面的拖拽排序功能，支持左右上下拖拽。根据具体需求，你可以进一步自定义样式和功能。