vue-grid-layout实现桌面拖拽布局

vue-grid-layout实现拖拽布局

想实现桌面自由拖拽布局的效果，找到了vue-grid-layout栅格布局插件，可以完美解决。
初始布局，拖动可改变布局。

安装vue-grid-layout

npm install vue-grid-layout --save

引入vue-grid-layout

import VueGridLayout from 'vue-grid-layout'

示例

<template>
  <div class="board" style="width: 100%">
    <div class="home">
      <grid-layout
        :layout="layoutData"
        :col-num="layoutConfig.collomn" 
        :maxRows="layoutConfig.maxRows"
        :row-height="layoutConfig.rowHeight"
        :is-draggable="layoutConfig.dialogVisible"
        :is-resizable="layoutConfig.isResizeable"
        :is-mirrored="layoutConfig.isMirrored"
        :vertical-compact="layoutConfig.vertical"
        :margin="layoutConfig.margin"
        :use-css-transforms="layoutConfig.
        "
        @layout-created="layoutCreatedEvent"  
        @layout-before-mount="layoutBeforeMountEvent"
        @layout-mounted="layoutMountedEvent" 
        @layout-ready="layoutReadyEvent"   
        @layout-updated="layoutUpdatedEvent" 
      >
        <grid-item v-for="(item) in layoutData"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          @resize="resizeEvent"  
          @move="moveEvent" 
          @resized="resizedEvent" 
          @moved="movedEvent"
        >
          {{item.i}}
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'

const GridLayout = VueGridLayout.GridLayout
const GridItem = VueGridLayout.GridItem
const layoutData = {
  "mainData": [
    {
      "x": 0,
      "y": 0,
      "w": 6,
      "h": 1,
      "i": "0"
    },
    {
      "x": 0,
      "y": 1,
      "w": 6,
      "h": 1,
      "i": "1"
    },
    {
      "x": 0,
      "y": 2,
      "w": 6,
      "h": 1,
      "i": "2"
    },
    {
      "x": 0,
      "y": 3,
      "w": 6,
      "h": 1,
      "i": "3"
    },
    {
      "x": 6,
      "y": 0,
      "w": 6,
      "h": 1,
      "i": "4"
    },
    {
      "x": 6,
      "y": 1,
      "w": 6,
      "h": 1,
      "i": "5"
    },
    {
      "x": 6,
      "y": 2,
      "w": 6,
      "h": 1,
      "i": "6"
    },
    {
      "x": 6,
      "y": 3,
      "w": 6,
      "h": 1,
      "i": "7"
    },
    {
      "x": 12,
      "y": 0,
      "w": 6,
      "h": 1,
      "i": "8"
    },
    {
      "x": 12,
      "y": 1,
      "w": 6,
      "h": 1,
      "i": "9"
    },
    {
      "x": 12,
      "y": 2,
      "w": 6,
      "h": 1,
      "i": "10"
    },
    {
      "x": 12,
      "y": 3,
      "w": 6,
      "h": 1,
      "i": "11"
    },
    {
      "x": 18,
      "y": 0,
      "w": 6,
      "h": 1,
      "i": "12"
    },
    {
      "x": 18,
      "y": 1,
      "w": 6,
      "h": 1,
      "i": "13"
    },
    {
      "x": 18,
      "y": 2,
      "w": 6,
      "h": 1,
      "i": "14"
    },
    {
      "x": 18,
      "y": 3,
      "w": 6,
      "h": 1,
      "i": "15"
    },
  ]
}
export default {
  data() {
    return {
      // 布局数据
      layoutData: [],
      layoutConfig: {
      	collomn: 24, // 网格的列数，默认为12
      	rowsHeight: 30,	// 每行的高度，默认150
      	maxRows: 30,	// 网格最大行数
        dialogVisible: true, 	// 是否可拖拽
        isResizeable: false, 	// 是否可改变大小
        isMirrored: true,	// RTL/LTR 的转换 Boolean      非必填 默认为false
        vertical: true,	// 垂直方向上 是否应该紧凑布局 Boolean 非必填 默认为true
        margin: [10, 10],	// 网格之间的边距
        useCss: true, 	// 是否使用css的transforms来排版 非必填 为false时 使用后采用定位方式来布局 默认为true
      }
    }
  },
  components: {
    GridLayout,
    GridItem
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.layoutData = layoutData.mainData
    },
    // 布局中单元改变事件  i, newX, newY 移动的坐标
    // i, newH, newW, newHPx, newWPx 变化的大小
    // newHPx, newWPx 是实际的像素
    // newH, newW 是数据中的 以每个单位大小为基准点算
    // 该元素放大缩小事件
    resizeEvent(i, newH, newW, newHPx, newWPx) {
      console.log("大小正在改变",i, newH, newW, newHPx, newWPx);
    },
    // 该元素移动事件
    moveEvent( i, newX, newY) {
      console.log("正在移动",i, newX, newY);
    },
    // 该元素放大缩小结束的事件
    resizedEvent(i, newH, newW, newHPx, newWPx) {
      console.log("大小改变完了",i, newH, newW, newHPx, newWPx);
    },
    // 该元素移动结束的事件
    movedEvent( i, newX, newY) {
      console.log("移动结束了", i, newX, newY);
    },
    // 布局创建事件
    layoutCreatedEvent(newLayout) {
      console.log(newLayout);
    },
    // 布局挂载之前事件
    layoutBeforeMountEvent(newLayout) {
      console.log(newLayout);
    },
    // 布局挂载事件
    layoutMountedEvent(newLayout) {
      console.log(newLayout);
    },
    // 布局准备事件
    layoutReadyEvent(newLayout) {
      console.log(newLayout);
    },
    // 布局更新事件
    layoutUpdatedEvent(newLayout) {
      console.log(newLayout);
    }
  },
  
}
 
</script>