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 
版权声明：本文为博主原创文章，转载请附上博文链接！