Vue-Grid-Layout分享一款好用的可拖拽組件

 

 

在使用Grafana的過程中，發現Grafana關於視圖頁面中每一個面板都可拖拽，可隨意放大放小，體驗非常棒，F12看了Grafana的代碼，看打包后的代碼很像react，進一步css，看到有grid layout的字眼，然后嘗試去搜了下有沒有這方面的組件，一搜果然是有這樣的組件的。首先看到的是react版本的組件，然后搜了下也有vue相關的。 以前也見過jquery的可拖拽組件demo，但是整體上感覺不如grid-layout優秀。

【1】 VUE Grid Layout.

【2】React Grid Layout

【3】jQuery響應式可拖拽的元素組件網格布局插件

每個組件在GitHub上的介紹還是比較清晰易懂，項目中主要用到了vue-grid-layout組件，下面簡單介紹下。

執行如下命令安裝

npm install vue-grid-layout --save
然后新增一個grid_layout.vue文件

<template>
  <div>
    <grid-layout
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :layoutList="testLayout">
    </grid-layout>
  </div>
</template>
 
<script>
  import gridLayout from './../comm/grid_layout'
 
  export default {
    data() {
      return {
        testLayout: [
          {"x": 0, "y": 0, "w": 4, "h": 7, "i": "0"},
          {"x": 4, "y": 0, "w": 4, "h": 7, "i": "1"},
          {"x": 8, "y": 0, "w": 4, "h": 7, "i": "2"},
          {"x": 0, "y": 7, "w": 4, "h": 6, "i": "3"},
          {"x": 0, "y": 13, "w": 4, "h": 5, "i": "4"},
          {"x": 4, "y": 7, "w": 4, "h": 11, "i": "5"},
          {"x": 8, "y": 7, "w": 4, "h": 6, "i": "6"},
          {"x": 8, "y": 13, "w": 4, "h": 5, "i": "7"}
        ]
      }
    },
    components: {
      gridLayout
    },
  }
</script>
 
<style scoped>
</style>
is-draggable 表示是否可拖拽，設置為true，說明是可以隨意拖拽的
is-resizable 表示是否可縮放，設置為ture，說明可以通過鼠標調整每一區域的大小
layoutList   是綁定的數據實體，用來標識區域大小的

layoutList是一個對象數據，每一個對象如下
{"x": 0, "y": 0, "w": 4, "h": 7, "i": "0"}
其中：
x 標識該區域左上角點的x坐標
y 標識該區域左上角點的y坐標
w 是寬度
h 是高度
i 是唯一標示，表示必須唯一，且不同，不然，你會發現改變大小的時候，所有的都會被改變。。。
--------------------- 
作者：涼茶冰 
來源：CSDN 
原文：https://blog.csdn.net/liangcha007/article/details/88963551 
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！