前言

在本文中將會用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實現九宮格拖拽

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的九宮格拖拽實現了，有問題或者發現錯誤的請指正，謝謝大家

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

作者：bb7bb
連結：

基於Vue實現拖拽升級（九宮格拖拽）

前言