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