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

Jioby 發(fā)布于2019-08-26 11:51 / 2283人閱讀

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

前言

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

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

效果實(shí)例

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

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

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

display:

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

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

subgrid: 如果網(wǎng)格容器本身是網(wǎ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方式（在這里只是簡單說明）

start: 左對齊

end: 右對齊

center: 居中對齊

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

align-items

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

start：頂部對齊

end：底部對齊

center：居中對齊

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

當(dāng)然，如果看不懂也不要緊，這里有一篇個人十分喜歡的網(wǎng)格布局的文章。里面介紹得十分詳細(xì)?？梢怨┐蠹疑钊雽W(xué)習(xí)網(wǎng)格布局內(nèi)容。

傳送門：Grid布局指南

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

Demo地址: Demo以及完整代碼

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

/*css*/

  .container{
    position: relative;   /*實(shí)現(xiàn)定位，使得滑塊定位相對于此*/
    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"      /*定義個格子的名稱，方便計算*/
                          "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}}

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

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

總結(jié)

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

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

云服務(wù)器 GPU云服務(wù)器實(shí)現(xiàn)拖拽 js實(shí)現(xiàn)數(shù)據(jù)拖拽原生js實(shí)現(xiàn)拖拽 js實(shí)現(xiàn)數(shù)據(jù)的拖拽

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107679.html

發(fā)表評論

登陸后可評論

0條評論

Jioby

男|高級講師

我要關(guān)注我要私信

TA的文章

阿里云云虛擬主機(jī)：年付3.5折/1核1G5M/獨(dú)立IP/個人企業(yè)建站

閱讀 1496·2021-10-18 13:29
利用騰訊文檔實(shí)現(xiàn)在線多人協(xié)作同步數(shù)據(jù)表單收集

閱讀 2827·2021-10-12 10:18
主機(jī)ovh是什么-電腦主機(jī)號是什么？

閱讀 3616·2021-09-22 15:06
CSS6：flex布局

閱讀 2621·2019-08-29 17:09
Webpack4教程 - 第二部分，使用loader處理scss,圖片以及轉(zhuǎn)換JS

閱讀 2829·2019-08-29 16:41
工作技術(shù)點(diǎn)小計14條 hybrid + animate 方向

閱讀 1526·2019-08-29 13:48
常用正則表達(dá)式

閱讀 3253·2019-08-26 13:49
JavaScript：回流（重排）與重繪

閱讀 3352·2019-08-26 13:34

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章