最近有个需求需要实现自定义首页布局，需要将屏幕按照 6 列 4 行进行等分成多个格子，然后将组件可拖拽对应格子进行渲染展示。

对比一些已有的插件，发现想要实现产品的交互效果，没有现成可用的。本身功能并不是太过复杂，于是决定自己基于vue 手撸一个简易的 Grid 拖拽布局。

https://stackblitz.com/edit/vitejs-vite-rkwugn

概况

需要实现 Grid 拖拽布局，主要了解这两个东西就行

• 拖放 API，关于拖放 API 介绍文章有很多 ，可以直接看 MDN 里拖放 API 介绍，可以说很详细了。
• Grid 布局， Grid 布局与 Flex 布局很相似，但是 Grid 像是二维布局，Flex 则为一维布局，Grid 布局远比 Flex 布局强大。MDN 关于网格布局介绍

需要实现主要包含：

• 组件物料栏拖拽到布局容器
• 布局容器 Grid 布局
• 放置时是否重叠判断
• 拖拽时样式
• 放置后样式
• 容器内二次拖拽

拖放操作实现

拖拽中主要使用到的事件如下

• 被拖拽元素事件：

• 放置容器事件：