Draggable And Resizable Grid Layout For Vue.js

Install & Download:

npm install vue-grid-layout

Description:

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.4.0 (08/03/2022)

GridLayout transformScale prop, to allow proper dragging and resizing when scaled
GridLayout and GridItem isBounded prop, to prevent draging outside of the parent element
Added GridItem passthrough options for interact resizable and draggable
Change function call order for responsive features
Added GridLayout restoreOnDrag prop, to generate less gaps on drag when verticalCompact is false
layout key extra validations
Fix grid items overlapping when using autoSize()

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