vue-draggable-resizable 实现一个flex布局类似网格 支持换行 子元素为正方形盒子拖拽排序效果

你可以使用`vue-draggable-resizable`插件来实现一个类似网格布局的拖拽排序效果。首先，确保你已经在项目中安装了该插件。

接下来，你可以按照以下步骤实现你的需求：

1. 创建一个父容器，设置其为flex布局，并且设置`flex-wrap: wrap`以支持换行。

<div class="grid-container">
  <!-- 子元素 -->
</div>

2. 在父容器中循环渲染子元素，每个子元素都是一个正方形盒子。

<div class="grid-container">
  <div v-for="(item, index) in items" :key="index" class="grid-item">
    <!-- 子元素内容 -->
  </div>
</div>

3. 使用`vue-draggable-resizable`插件将子元素变为可拖拽和可调整大小的元素。你可以在`mounted`钩子中初始化插件。

import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable
  },
  data() {
    return {
      items: [
        // 子元素数据
      ]
    }
  },
  mounted() {
    // 初始化 vue-draggable-resizable 插件
    VueDraggableResizable.mount(this.$refs.container)
  }
}

4. 在子元素的模板中使用`vue-draggable-resizable`组件，并设置合适的属性。

<div class="grid-container" ref="container">
  <vue-draggable-resizable
    v-for="(item, index) in items"
    :key="index"
    :w="100"
    :h="100"
    :x="item.x"
    :y="item.y"
    :isDraggable="true"
    :isResizable="true"
    @dragStop="onDragStop(index, $event)"
    @resizeStop="onResizeStop(index, $event)"
  >
    <!-- 子元素内容 -->
  </vue-draggable-resizable>
</div>

5. 在组件中添加对应的事件处理方法，用于更新子元素的位置和大小。

export default {
  // ...
  methods: {
    onDragStop(index, event) {
      // 更新子元素的位置
      this.items[index].x = event.x
      this.items[index].y = event.y
    },
    onResizeStop(index, event) {
      // 更新子元素的大小
      this.items[index].w = event.width
      this.items[index].h = event.height
    }
  }
}

通过以上步骤，你可以实现一个基于`vue-draggable-resizable`插件的flex布局类似网格的拖拽排序效果，其中子元素为正方形盒子。记得根据你的需求，调整样式和属性值。