Draggable And Resizable Grid Layout For Vue.js

A Vue.js component for creating a draggable and resizable grid layout, inspired by Gridster.

Basic usage:

1. Import and register the component.

import { GridLayout, GridItem } from "vue-grid-layout"
export default {
  components: {
      GridLayout,
      GridItem
  },
  // ...
}

2. Add the GridLayout component to the template.

<!-- example.vue -->
<template>
  <grid-layout :layout.sync="layout"
               :col-num="12"
               :row-height="30"
               :is-draggable="draggable"
               :is-resizable="resizable"
               :vertical-compact="true"
               :use-css-transforms="true"
  >
      <grid-item v-for="item in layout"
                 :static="item.static"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i"
      >
          <span class="text">{{itemTitle(item)}}</span>
      </grid-item>
  </grid-layout>
</template>

export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0", static: false},
        {"x":2,"y":0,"w":2,"h":4,"i":"1", static: true},
        {"x":4,"y":0,"w":2,"h":5,"i":"2", static: false},
        {"x":6,"y":0,"w":2,"h":3,"i":"3", static: false},
        {"x":8,"y":0,"w":2,"h":3,"i":"4", static: false},
        {"x":10,"y":0,"w":2,"h":3,"i":"5", static: false},
        {"x":0,"y":5,"w":2,"h":5,"i":"6", static: false},
        {"x":2,"y":5,"w":2,"h":5,"i":"7", static: false},
        {"x":4,"y":5,"w":2,"h":5,"i":"8", static: false},
        {"x":6,"y":3,"w":2,"h":4,"i":"9", static: true},
        {"x":8,"y":4,"w":2,"h":4,"i":"10", static: false},
        {"x":10,"y":4,"w":2,"h":4,"i":"11", static: false},
        {"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
        {"x":2,"y":10,"w":2,"h":5,"i":"13", static: false},
        {"x":4,"y":8,"w":2,"h":4,"i":"14", static: false},
        {"x":6,"y":8,"w":2,"h":4,"i":"15", static: false},
        {"x":8,"y":10,"w":2,"h":5,"i":"16", static: false},
        {"x":10,"y":4,"w":2,"h":2,"i":"17", static: false},
        {"x":0,"y":9,"w":2,"h":3,"i":"18", static: false},
        {"x":2,"y":6,"w":2,"h":2,"i":"19", static: false}
      ],
      draggable: true,
      resizable: true,
      index: 0
      }
  },
  methods: {
    itemTitle(item) {
      let result = item.i;
      if (item.static) {
        result += " - Static";
      }
      return result;
    }
  }
}

3. Available component props.

// GridLayout Props
autoSize: {
  type: Boolean,
  default: true
},
colNum: {
  type: Number,
  default: 12
},
rowHeight: {
  type: Number,
  default: 150
},
maxRows: {
  type: Number,
  default: Infinity
},
margin: {
  type: Array,
  default: function () {
      return [10, 10];
  }
},
isDraggable: {
  type: Boolean,
  default: true
},
isResizable: {
  type: Boolean,
  default: true
},
isMirrored: {
  type: Boolean,
  default: false
},
useCssTransforms: {
  type: Boolean,
  default: true
},
verticalCompact: {
  type: Boolean,
  default: true
},
layout: {
  type: Array,
  required: true,
},
responsive: {
  type: Boolean,
  default: false
},
responsiveLayouts: {
  type: Object,
  default: function() {
      return {};
  }
},
breakpoints:{
  type: Object,
  default: function(){return{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
},
cols:{
  type: Object,
  default: function(){return{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }},
},
preventCollision: {
  type: Boolean,
  default: false
},
useStyleCursor: {
  type: Boolean,
  default: true
}

// GridItem Props
isDraggable: {
  type: Boolean,
  required: false,
  default: null
},
isResizable: {
  type: Boolean,
  required: false,
  default: null
},
static: {
  type: Boolean,
  required: false,
  default: false
},
minH: {
  type: Number,
  required: false,
  default: 1
},
minW: {
  type: Number,
  required: false,
  default: 1
},
maxH: {
  type: Number,
  required: false,
  default: Infinity
},
maxW: {
  type: Number,
  required: false,
  default: Infinity
},
x: {
  type: Number,
  required: true
},
y: {
  type: Number,
  required: true
},
w: {
  type: Number,
  required: true
},
h: {
  type: Number,
  required: true
},
i: {
  required: true
},
dragIgnoreFrom: {
  type: String,
  required: false,
  default: 'a, button'
},
dragAllowFrom: {
  type: String,
  required: false,
  default: null
},
resizeIgnoreFrom: {
  type: String,
  required: false,
  default: 'a, button'
},
preserveAspectRatio: {
  type: Boolean,
  required: false,
  default: false,
}

Preview:

Changelog:

v2.3.12 (01/16/2021)

• Alternative version for legacy browsers, like IE11

v2.3.11 (10/13/2020)

• fix: regression when using responsive layout

v2.3.10 (10/12/2020)

• Bumped interact.js to 1.10.0, now imported as ES6 modules to optimize size
• fix: resizing a grid item in RTL mode wasn’t working
• Added GridLayout.useStyleCursor property to fix possible browser freezes
• fix: wrong parent layout when GridItem is not the child of GridLayout
• Fix: Item’s size changes when hiding/displaying it again in responsive mode

v2.3.9 (09/28/2020)

• Fix plugin installation

v2.3.8 (07/31/2020)

• Make margins reactive
• Added missing ‘layout-updated’ events
• Support for initial responsive layouts and breakpoint change event
• Bugfix for possible error when layout items get removed and interactObj is not set
• Fix wrong grid item sorting in responsive mode

11/02/2019

• v2.3.7

Download Details:

Author: jbaysolutions

Live Demo: https://jbaysolutions.github.io/vue-grid-layout/

Download Link: https://github.com/jbaysolutions/vue-grid-layout/archive/master.zip

Official Website: https://github.com/jbaysolutions/vue-grid-layout

Install & Download:

npm install vue-grid-layout