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

Jioby 發布于2019-08-26 11:51 / 2247人閱讀

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

前言

在本文中將會用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實現數據的拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107679.html

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

摘要：前言在本文中將會用完成九宮格拖拽效果，同時介紹一下網格布局。到這里我們就把基于的九宮格拖拽實現了，有問題或者發現錯誤的請指正，謝謝大家珍惜淡定的心境，苦過后更加清前言在本文中將會用Vue完成九宮格拖拽效果，同時介紹一下網格布局。具體代碼以及demo可以點以下超鏈接進入傳送門：Demo以及完整代碼連接效果實例 showImg(https://segmentfault.com/im...

RyanQ 2019-08-29 15:13 評論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