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

RyanQ 发布于2019-08-29 15:13 / 1150人阅读

摘要：前言在本文中将会用完成九宫格拖拽效果，同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家珍惜淡定的心境，苦过后更加清

前言

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

传送门：Demo以及完整代码连接

效果实例

简单了解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:

justify-items

水平方向对齐方式（在这里只是简单说明）

start: 左对齐

end: 右对齐

center: 居中对齐

stretch: 填满（默认）

align-items

垂直方向对齐方式

start：顶部对齐

end：底部对齐

center：居中对齐

stretch：填满（默认）

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

传送门：Grid布局指南

Vue实现九宫格拖拽

Demo地址: Demo以及完整代码

实现九宫格布局

/*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的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家

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

GPU云服务器云服务器实现拖拽 js实现数据拖拽原生js实现拖拽 js实现数据的拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113178.html

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

摘要：前言在本文中将会用完成九宫格拖拽效果，同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家珍惜淡定的心境，苦过后更加清前言在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入传送门：Demo以及完整代码连接效果实例 showImg(https://segmentfault.com/im...

Jioby 2019-08-26 11:51 评论0 收藏0
vue的table组件

一个vue-table的组件说明： 1.基于element-ui开发的vue表格组件。 showImg(https://segmentfault.com/img/bVbfNNM?w=786&h=649);showImg(https://segmentfault.com/img/bVbfNPc?w=746&h=233);showImg(https://segmentfault.com/img/bV...

eternalshallow 2019-08-23 11:26 评论0 收藏0
vue-avatar-tailor，vue头像裁剪组件

摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。项目简介本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖使用九宫格进行裁剪，自由选择裁剪区域。实时预览裁剪后效果。可以将裁剪好的图片，...

imccl 2019-08-23 12:13 评论0 收藏0
基于Vue实现拖拽效果

摘要：是浏览器的特有属性实现拖拽功能我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。当然我们同时也学习了的一些方法，例如自定义指令等。效果图 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

韩冰 2019-08-22 16:40 评论0 收藏0