Draggable & Resizable Grid Layout For Vue 3

A responsive, draggable, and resizable grid layout system for Vue 3. Inspired by React Grid Layout.

Basic usage:

1. Import the grid layout component.

// Globally
import { GridLayout, GridItem } from 'grid-layout-plus'
app.component('GridLayout', GridLayout)
   .component('GridItem', GridItem)

// locally
import { defineComponent } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'
export default defineComponent({
  components: {
    GridLayout,
    GridItem
  }
})

2. Add the <GridLayout /> component to the template.

<template>
  <!-- Default slot usage -->
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @resize="handleResize"
    >
      {{ item.i }}
    </GridItem>
  </GridLayout>
</template>

3. Available grid layout props.

autoSize: {
  type: Boolean,
  default: true
},
colNum: {
  type: Number,
  default: 12
},
rowHeight: {
  type: Number,
  default: 150
},
maxRows: {
  type: Number,
  default: Infinity
},
margin: {
  type: Array as PropType<number[]>,
  default: () => [10, 10]
},
isDraggable: {
  type: Boolean,
  default: true
},
isResizable: {
  type: Boolean,
  default: true
},
isMirrored: {
  type: Boolean,
  default: false
},
isBounded: {
  type: Boolean,
  default: false
},
useCssTransforms: {
  type: Boolean,
  default: true
},
verticalCompact: {
  type: Boolean,
  default: true
},
restoreOnDrag: {
  type: Boolean,
  default: false
},
layout: {
  type: Array as PropType<Layout>,
  required: true
},
responsive: {
  type: Boolean,
  default: false
},
responsiveLayouts: {
  type: Object as PropType<Partial<ResponsiveLayout>>,
  default: () => ({})
},
transformScale: {
  type: Number,
  default: 1
},
breakpoints: {
  type: Object as PropType<Breakpoints>,
  default: () => ({ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 })
},
cols: {
  type: Object as PropType<Breakpoints>,
  default: () => ({ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 })
},
preventCollision: {
  type: Boolean,
  default: false
},
useStyleCursor: {
  type: Boolean,
  default: true
}

4. Available grid item props.

isDraggable: {
  type: Boolean,
  default: null
},
isResizable: {
  type: Boolean,
  default: null
},
isBounded: {
  type: Boolean,
  default: null
},
static: {
  type: Boolean,
  default: false
},
minH: {
  type: Number,
  default: 1
},
minW: {
  type: Number,
  default: 1
},
maxH: {
  type: Number,
  default: Infinity
},
maxW: {
  type: Number,
  default: Infinity
},
x: {
  type: Number,
  required: true
},
y: {
  type: Number,
  required: true
},
w: {
  type: Number,
  required: true
},
h: {
  type: Number,
  required: true
},
i: {
  type: [Number, String],
  required: true
},
dragIgnoreFrom: {
  type: String,
  default: 'a, button'
},
dragAllowFrom: {
  type: String,
  default: null
},
resizeIgnoreFrom: {
  type: String,
  default: 'a, button'
},
preserveAspectRatio: {
  type: Boolean,
  default: false
},
dragOption: {
  type: Object,
  default: () => ({})
},
resizeOption: {
  type: Object,
  default: () => ({})
}

Preview:

Changelog:

v1.0.3 (08/23/2023)

• Bugfixes

Download Details:

Author: qmhc

Live Demo: https://grid-layout-plus.netlify.app/example/basic.html

Download Link: https://github.com/qmhc/grid-layout-plus/archive/refs/heads/main.zip

Official Website: https://github.com/qmhc/grid-layout-plus

Install & Download:

# Yarn
$ yarn add grid-layout-plus

# NPM
$ npm i grid-layout-plus