uni-app拖动排序组件

在uni-app中实现拖动排序功能，可以利用第三方组件库或者自行实现。这里提供一个基于SortableJS库的简单示例，展示如何在uni-app中实现拖动排序功能。SortableJS是一个轻量级的JavaScript库，用于拖放排序列表。

步骤一：安装SortableJS

首先，你需要在你的uni-app项目中安装sortablejs库。你可以通过npm或yarn进行安装，但注意uni-app原生不支持npm包直接引用，因此你可能需要使用条件编译或者将库代码直接拷贝到项目中。

这里假设你已经将sortable.min.js文件放置在了项目的static目录下。

步骤二：编写组件

在你的uni-app项目中创建一个新的组件，比如SortableList.vue，并在其中引入和使用SortableJS。

<template>
  <view class="sortable-list">
    <view v-for="(item, index) in list" :key="item.id" class="list-item" ref="items">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  mounted() {
    this.sortable = new Sortable(this.$refs.items, {
      onEnd: (evt) => {
        const movedItem = this.list.splice(evt.oldIndex, 1)[0];
        this.list.splice(evt.newIndex, 0, movedItem);
      },
    });
  },
  beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy();
    }
  },
};
</script>

<style>
.sortable-list {
  display: flex;
  flex-direction: column;
}
.list-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

说明

1. 模板部分：使用v-for指令遍历list数组，生成可拖动的列表项。
2. 脚本部分：在mounted生命周期钩子中初始化Sortable实例，并绑定到列表项上。在onEnd回调中处理列表项的重新排序。
3. 样式部分：简单的样式定义，使列表项看起来更清晰。

注意事项

• 确保sortable.min.js文件已经正确引入到你的项目中。
• 在小程序端可能需要额外的适配工作，因为小程序对DOM操作有限制。
• 考虑到性能，如果列表项很多，可以考虑使用虚拟列表技术。

通过上述步骤，你应该能够在uni-app中实现基本的拖动排序功能。