基于Vue實(shí)現(xiàn)拖拽升級(jí)（九宮格拖拽）

RyanQ 發(fā)布于2019-08-29 15:13 / 1175人閱讀

摘要：前言在本文中將會(huì)用完成九宮格拖拽效果，同時(shí)介紹一下網(wǎng)格布局。到這里我們就把基于的九宮格拖拽實(shí)現(xiàn)了，有問題或者發(fā)現(xiàn)錯(cuò)誤的請(qǐng)指正，謝謝大家珍惜淡定的心境，苦過后更加清

前言

在本文中將會(huì)用Vue完成九宮格拖拽效果，同時(shí)介紹一下網(wǎng)格布局。具體代碼以及demo可以點(diǎn)以下超鏈接進(jìn)入

傳送門：Demo以及完整代碼連接

效果實(shí)例

簡(jiǎn)單了解Grid布局（網(wǎng)格布局） 什么是網(wǎng)格布局

CSS網(wǎng)格布局（又稱“網(wǎng)格”），是一種二維網(wǎng)格布局系統(tǒng)。CSS在處理網(wǎng)頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動(dòng))，position（定位）和inline-block（行內(nèi)塊）布局，但是這些方法本質(zhì)上是hack，遺漏了很多功能，例如垂直居中。后來出了flexbox(盒子布局)，解決了很多布局問題，但是它僅僅是一維布局，而不是復(fù)雜的二維布局，實(shí)際上它們（flexbox與grid）能很好的配合使用。Grid布局是第一個(gè)專門為解決布局問題而創(chuàng)建的CSS模塊.

簡(jiǎn)單說說網(wǎng)格布局的屬性

display:

grid: 生成塊級(jí)網(wǎng)格

inline-grid: 生成行內(nèi)網(wǎng)格

subgrid: 如果網(wǎng)格容器本身是網(wǎng)格項(xiàng)（嵌套網(wǎng)格容器），此屬性用來繼承其父網(wǎng)格容器的列、行大小。

grid-template-columns

設(shè)置網(wǎng)格列大小

grid-template-rows

設(shè)置網(wǎng)格行大小

grid-template-areas

設(shè)置網(wǎng)格區(qū)域

grid-column-gap

設(shè)置網(wǎng)格列間距

grid-row-gap

設(shè)置網(wǎng)格行間距

grid-gap

縮寫形式 grid-gap:

justify-items

水平方向?qū)R方式（在這里只是簡(jiǎn)單說明）

start: 左對(duì)齊

end: 右對(duì)齊

center: 居中對(duì)齊

stretch: 填滿（默認(rèn)）

align-items

垂直方向?qū)R方式

start：頂部對(duì)齊

end：底部對(duì)齊

center：居中對(duì)齊

stretch：填滿（默認(rèn)）

當(dāng)然，如果看不懂也不要緊，這里有一篇個(gè)人十分喜歡的網(wǎng)格布局的文章。里面介紹得十分詳細(xì)。可以供大家深入學(xué)習(xí)網(wǎng)格布局內(nèi)容。

傳送門：Grid布局指南

Vue實(shí)現(xiàn)九宮格拖拽

Demo地址: Demo以及完整代碼

實(shí)現(xiàn)九宮格布局

/*css*/

  .container{
    position: relative;   /*實(shí)現(xiàn)定位，使得滑塊定位相對(duì)于此*/
    display: grid;        /*定義網(wǎng)格布局*/
    width: 300px;
    height: 300px;
    grid-template-columns: 100px 100px 100px;     /*實(shí)現(xiàn)九宮格，行列各三*/
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: "head1 head2 head3"      /*定義個(gè)格子的名稱，方便計(jì)算*/
                          "main1 main2 main3"
                          "footer1 footer2 footer3";
    border: 1px solid #000;
    margin: 0 auto;
  }
  .block{
    position: absolute;     /*相對(duì)于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}}

實(shí)現(xiàn)拖拽的JS代碼部分

在這里我選取一些核心代碼出來講解。代碼有所省略，因?yàn)榇a著實(shí)有點(diǎn)長(zhǎng)，太占篇幅而且沒多大意義，如果需要瀏覽全部代碼可以點(diǎn)擊上面的Demo連接。

總結(jié)

到這里我們把九宮格拖拽實(shí)現(xiàn)了，同時(shí)學(xué)習(xí)了Grid（網(wǎng)格布局）。總的做下來，發(fā)現(xiàn)用網(wǎng)格布局做網(wǎng)格拖拽更加費(fèi)事，但是為了后續(xù)可以方便一些，也只好搗鼓下來了。到這里我們就把基于Vue的九宮格拖拽實(shí)現(xiàn)了，有問題或者發(fā)現(xiàn)錯(cuò)誤的請(qǐng)指正，謝謝大家

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