uni-app 宫格型拖拽排序插件需求

针对您提出的uni-app宫格型拖拽排序插件需求，这里提供一个基于Vue和uni-app的简单实现案例。这个案例将使用vuedraggable库来实现拖拽排序功能，并结合uni-app的布局特性来创建一个宫格布局。

首先，确保您的uni-app项目中已经安装了vuedraggable库。如果还没有安装，可以通过以下命令安装：

npm install vuedraggable --save

接下来，在您的uni-app组件中，可以如下实现宫格型拖拽排序：

<template>
  <view class="container">
    <draggable v-model="gridItems" @end="onDragEnd">
      <view v-for="(item, index) in gridItems" :key="item.id" class="grid-item">
        <text>{{ item.name }}</text>
      </view>
    </draggable>
  </view>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      gridItems: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ... 更多项
      ]
    };
  },
  methods: {
    onDragEnd(evt) {
      console.log('拖拽结束后的顺序:', this.gridItems);
      // 可以在这里处理拖拽结束后的逻辑，比如保存顺序到服务器
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 0 30%; /* 调整为宫格布局，这里设置每个项占宽度的30% */
  margin: 1%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
</style>

在这个例子中，我们使用了vuedraggable组件来包裹宫格项，并通过v-model绑定到gridItems数组。v-for指令用于循环渲染宫格项，每个项都包含一个文本显示其名称。onDragEnd方法会在拖拽结束时被调用，可以用于处理排序后的逻辑。

样式部分，我们使用了CSS Flexbox布局来创建一个宫格布局，每个宫格项占容器宽度的30%（加上1%的外边距），这样可以在一行内显示多个项，形成宫格效果。

请注意，这只是一个基础实现，实际应用中可能需要根据具体需求进行调整，比如处理不同屏幕尺寸的适配、增加拖拽时的视觉效果等。