Vue实现拖拽升级(九宫格拖拽)

前言

在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。

效果实例

简单了解Grid布局（网格布局）

什么是网格布局

CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了flexbox(盒子布局)，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块.

简单说说网格布局的属性

• display: grid: 生成块级网格 inline-grid: 生成行内网格 subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。
• grid-template-columns 设置网格列大小
• grid-template-rows 设置网格行大小
• grid-template-areas 设置网格区域
• grid-column-gap 设置网格列间距
• grid-row-gap 设置网格行间距
• grid-gap 缩写形式 grid-gap: <grid-row-gap> <grid-column-gap>
• justify-items 水平方向对齐方式（在这里只是简单说明） start: 左对齐 end: 右对齐 center: 居中对齐 stretch: 填满（默认）
• align-items 垂直方向对齐方式 start： 顶部对齐 end： 底部对齐 centerÿ