uni-app 拖拽调整顺序

在处理uni-app中的拖拽调整顺序功能时，通常我们需要结合Vue的事件机制和DOM操作来实现。以下是一个简单的代码示例，展示如何在uni-app中实现列表项的拖拽排序功能。

首先，确保你的项目已经创建并配置好。然后，可以按照以下步骤实现拖拽排序：

1. 在页面的<template>部分定义一个可拖拽的列表：

<template>
  <view class="container">
    <view
      v-for="(item, index) in list"
      :key="item.id"
      class="draggable-item"
      draggable="true"
      @dragstart="dragStart(index)"
      @dragover.prevent
      @drop="drop(index)"
    >
      {{ item.name }}
    </view>
  </view>
</template>

1. 在页面的<script>部分定义数据和方法：

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      dragSrcIndex: null,
    };
  },
  methods: {
    dragStart(index) {
      this.dragSrcIndex = index;
    },
    drop(index) {
      const movedItem = this.list.splice(this.dragSrcIndex, 1)[0];
      this.list.splice(index, 0, movedItem);
      this.dragSrcIndex = null;
    },
  },
};
</script>

1. 在页面的<style>部分添加一些基本的样式：

<style>
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.draggable-item {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

上述代码实现了一个基本的拖拽排序功能。在dragStart方法中，我们记录了拖拽开始的列表项的索引。在drop方法中，我们通过splice方法将拖拽的列表项移动到新的位置。

需要注意的是，这个示例是一个简化的实现，适用于基本的拖拽排序需求。在实际应用中，你可能需要处理更多的细节，比如拖拽的视觉反馈、防止非法操作（如将项拖出列表）、以及跨平台的兼容性等。此外，uni-app在某些平台上（如小程序）可能对DOM操作有所限制，因此在实际部署时需要根据平台特性进行调整。