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

感谢参考原文-http://bjbsair.com/2020-03-27/tech-info/7202.html

基于Vue实现拖拽升级（九宫格拖拽）

前言

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

效果实例

基于Vue实现拖拽升级（九宫格拖拽）

Demo

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

什么是网格布局

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

基于Vue实现拖拽升级（九宫格拖拽）

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：填满（默认）

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

传送门：Grid布局指南

https://www.jianshu.com/p/d183265a8dad

实现九宫格布局

/*css*/  
  
  .container{  
    position: relative;   /*实现定位，使得滑块定位相对于此*/  
    display: grid;        /*定义网格布局*/  
    width: 300px;  
    height: 300px;  
    grid-template-columns: 100px 100px 100px;     /*实现九宫格，行列各三*/  
    grid-template-rows: 100px 100px 100px;  
    grid-template-areas: "head1 head2 head3"      /*定义个格子的名称，方便计算*/  
                          "main1 main2 main3"  
                          "footer1 footer2 footer3";  
    border: 1px solid #000;  
    margin: 0 auto;  
  }  
  .block{  
    position: absolute;     /*相对于container定位*/  
    width: 100px;  
    height: 100px;  
    display: flex;        /*flex布局，使得文字在中央*/  
    justify-content: center;  
    justify-items: center;  
    align-items: center;  
    align-content: center;  
    user-select: none;      /*用户不可选定文字*/  
    background: olivedrab;  
    border: 1px solid #000  
  }  

//app.vue  
  
  
  
  
      
      
  
        {{positionX}}  
        {{positionY}}  
      
  
      
  
  
  

实现拖拽的JS代码部分

在这里我选取一些核心代码出来讲解。代码有所省略，因为代码着实有点长，太占篇幅而且没多大意义，如果需要浏览全部代码可以点击上面的Demo连接。

总结

到这里我们把九宫格拖拽实现了，同时学习了Grid（网格布局）。总的做下来，发现用网格布局做网格拖拽更加费事，但是为了后续可以方便一些，也只好捣鼓下来了。到这里我们就把基于Vue的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家

珍惜淡定的心境，苦过后更加清感谢参考原文-http://bjbsair.com/2020-03-27/tech-info/7202/

基于Vue实现拖拽升级（九宫格拖拽）

前言

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

效果实例

基于Vue实现拖拽升级（九宫格拖拽）

Demo

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

什么是网格布局

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

基于Vue实现拖拽升级（九宫格拖拽）

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：填满（默认）

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

传送门：Grid布局指南

https://www.jianshu.com/p/d183265a8dad

实现九宫格布局

/*css*/  
  
  .container{  
    position: relative;   /*实现定位，使得滑块定位相对于此*/  
    display: grid;        /*定义网格布局*/  
    width: 300px;  
    height: 300px;  
    grid-template-columns: 100px 100px 100px;     /*实现九宫格，行列各三*/  
    grid-template-rows: 100px 100px 100px;  
    grid-template-areas: "head1 head2 head3"      /*定义个格子的名称，方便计算*/  
                          "main1 main2 main3"  
                          "footer1 footer2 footer3";  
    border: 1px solid #000;  
    margin: 0 auto;  
  }  
  .block{  
    position: absolute;     /*相对于container定位*/  
    width: 100px;  
    height: 100px;  
    display: flex;        /*flex布局，使得文字在中央*/  
    justify-content: center;  
    justify-items: center;  
    align-items: center;  
    align-content: center;  
    user-select: none;      /*用户不可选定文字*/  
    background: olivedrab;  
    border: 1px solid #000  
  }  

//app.vue  
  
  
  
  
      
      
  
        {{positionX}}  
        {{positionY}}  
      
  
      
  
  
  

实现拖拽的JS代码部分

在这里我选取一些核心代码出来讲解。代码有所省略，因为代码着实有点长，太占篇幅而且没多大意义，如果需要浏览全部代码可以点击上面的Demo连接。

总结

到这里我们把九宫格拖拽实现了，同时学习了Grid（网格布局）。总的做下来，发现用网格布局做网格拖拽更加费事，但是为了后续可以方便一些，也只好捣鼓下来了。到这里我们就把基于Vue的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家

珍惜淡定的心境，苦过后更加清