vue 移动到图片浮动_基于Vue实现拖拽升级（九宫格拖拽）

前言

在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入

效果实例

Demo

简单了解Grid布局(网格布局)

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

grid

简单说说网格布局的属性display:grid: 生成块级网格

inline-grid: 生成行内网格

subgrid: 如果网格容器本身是网格项(嵌套网格容器)，此属性用来继承其父网格容器的列、行大小。

grid-template-columns设置网格列大小

grid-template-rows设置网格行大小

grid-template-areas设置网格区域

grid-column-gap设置网格列间距

grid-row-gap设置网格行间距

grid-gap缩写形式  grid-gap:

justify-items水平方向对齐方式(在这里只是简单说明)

start: 左对齐

end: 右对齐

center: 居中对齐

stretch: 填满(默认)

align-items垂直方向对齐方式

start： 顶部对齐

end： 底部对齐

center： 居中对齐

stretch：填满(默认)

当然，如果看不懂也不要紧，这里有一篇个人十分喜欢的网格布局的文章。里面介绍得十分详细。可以供大家深入学习网格布局内容。

Vue实现九宫格拖拽

实现九宫格布局/*css*/

.container{    position: relative;   /*实现定位，使得滑块定位相对于此*/