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

在使用Grafana的过程中，发现Grafana关于视图页面中每一个面板都可拖拽，可随意放大放小，体验非常棒，F12看了Grafana的代码，看打包后的代码很像react，进一步css，看到有grid layout的字眼，然后尝试去搜了下有没有这方面的组件，一搜果然是有这样的组件的。首先看到的是react版本的组件，然后搜了下也有vue相关的。 以前也见过jquery的可拖拽组件demo，但是整体上感觉不如grid-layout优秀。

【】 VUE Grid Layout.

【】React Grid Layout

【】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": , "y": , "w": , "h": , "i": ""},
          {"x": , "y": , "w": , "h": , "i": ""},
          {"x": , "y": , "w": , "h": , "i": ""},
          {"x": , "y": , "w": , "h": , "i": ""},
          {"x": , "y": , "w": , "h": , "i": ""},
          {"x": , "y": , "w": , "h": , "i": ""},
          {"x": , "y": , "w": , "h": , "i": ""},
          {"x": , "y": , "w": , "h": , "i": ""}
        ]
      }
    },
    components: {
      gridLayout
    },
  }
</script>

<style scoped>
</style>
is-draggable 表示是否可拖拽，设置为true，说明是可以随意拖拽的
is-resizable 表示是否可缩放，设置为ture，说明可以通过鼠标调整每一区域的大小
layoutList   是绑定的数据实体，用来标识区域大小的

layoutList是一个对象数据，每一个对象如下
{"x": , "y": , "w": , "h": , "i": ""}
其中：
x 标识该区域左上角点的x坐标
y 标识该区域左上角点的y坐标
w 是宽度
h 是高度
i 是唯一标示，表示必须唯一，且不同，不然，你会发现改变大小的时候，所有的都会被改变。。。
---------------------
作者：凉茶冰
来源：CSDN
原文：https://blog.csdn.net/liangcha007/article/details/88963551
版权声明：本文为博主原创文章，转载请附上博文链接！