uni-app 有没有vue拖拽排序的组件类似于import draggable from 'vuedraggable'或者sortable.js

uniapp真机上直接用vuedraggable会报错原因不支持window和document

在uni-app中，虽然没有直接等效于vuedraggable或sortable.js的官方组件，但你可以通过集成sortable.js来实现拖拽排序功能。以下是一个简单的集成示例，展示了如何在uni-app中使用sortable.js来实现拖拽排序。

首先，确保你的项目中已经安装了sortable.js。你可以通过npm或yarn来安装它，但由于uni-app的特殊环境，你可能需要在HBuilderX中手动将sortable.js文件添加到你的项目中，或者使用条件编译来处理不同平台的依赖。

假设你已经将sortable.js添加到了项目中，接下来是在uni-app中使用它的示例代码：

1. 在页面中引入sortable.js

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

<script>
import Sortable from '@/path/to/sortable.min.js'; // 根据你的项目结构调整路径

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

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

1. 注意事项

• 在mounted生命周期钩子中初始化Sortable实例，并绑定到页面的容器元素上。
• 使用dataIdAttr选项来指定用于排序的元素ID属性，这里我们使用了data-id。
• 在beforeDestroy生命周期钩子中销毁Sortable实例，以避免内存泄漏。

这个示例展示了如何在uni-app中使用sortable.js来实现基本的拖拽排序功能。根据你的具体需求，你可能需要调整样式或添加更多的功能，比如拖拽手柄、拖拽限制等。