vue3 vue-draggable-grid

在 Vue 3 中实现可拖拽网格布局，可以通过使用现代的 Vue 组件库或直接结合第三方库实现。以下是一些推荐的库和实现方式： ### 推荐库 1. **Vue Grid Layout (支持 Vue 3)** Vue Grid Layout 是一个响应式、可拖拽、可调整大小的网格布局系统。它最初是为 Vue 2 设计的，但已有社区维护的版本支持 Vue 3。 使用该库可以创建类似仪表盘的布局，组件支持拖拽和调整大小，并且具备响应式断点配置[^1]。 示例代码： ```bash npm install vue-grid-layout ``` ```vue <template> <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" > <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h"> <div>{{ item.i }}</div> </grid-item> </grid-layout> </template> <script> import { GridLayout, GridItem } from 'vue-grid-layout' export default { components: { GridLayout, GridItem }, data() { return { layout: [ { x: 0, y: 0, w: 2, h: 2, i: '0' }, { x: 2, y: 0, w: 2, h: 4, i: '1' }, { x: 4, y: 0, w: 2, h: 5, i: '2' } ] } } } </script> ``` 2. **Vue Draggable (来自 SortableJS)** `vuedraggable` 是一个基于 `SortableJS` 的封装组件，适用于 Vue 3，支持列表拖拽排序，也可以用于构建网格布局。 它非常适合需要拖拽排序功能的场景，例如任务管理看板或图块布局。 示例代码： ```bash npm install vuedraggable ``` ```vue <template> <draggable v-model="gridItems" tag="div" class="grid-container"> <div v-for="item in gridItems" :key="item.id" class="grid-item"> {{ item.name }} </div> </draggable> </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' } ] } } } </script> <style> .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .grid-item { padding: 20px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; } </style> ``` 3. **Gridstack.js + Vue 3 封装** 如果需要更复杂的拖拽网格功能（如动态添加/删除组件、响应式布局等），可以使用 `gridstack.js` 并在 Vue 3 中进行封装。它支持拖拽、调整大小、响应式布局等高级功能[^1]。 示例代码： ```bash npm install gridstack ``` ```vue <template> <div ref="grid" class="grid-stack"></div> </template> <script> import { GridStack } from 'gridstack' import 'gridstack/dist/gridstack.min.css' export default { mounted() { const grid = GridStack.init({ float: true, cellHeight: 80, acceptWidgets: true }, this.$refs.grid) grid.addWidget({ x: 0, y: 0, w: 2, h: 2, content: '<div class="grid-stack-item-content">Item 1</div>' }) grid.addWidget({ x: 2, y: 0, w: 2, h: 3, content: '<div class="grid-stack-item-content">Item 2</div>' }) } } </script> ``` ### 实现建议 - 如果需要高度定制的拖拽网格，推荐使用 `gridstack.js`。 - 如果只需要简单的拖拽排序功能，`vuedraggable` 是轻量级且易于集成的选择。 - 如果需要响应式仪表盘布局，`vue-grid-layout` 是最合适的库。 ---