@noction/vue-draggable-grid

vue-draggable-grid

Grid layout for vue 3 with draggable, resize, responsive events

Rewrote to TypeScript, Composition API and migrated to Vue3

Usage

import { createApp } from 'vue'
import VueDraggableGrid from '@noction/vue-draggable-grid'
import App from './App.vue'
import '@noction/vue-draggable-grid/styles'

const app = createApp(App)

app.use(VueDraggableGrid)

app.mount('#app')

<script setup lang="ts">
import { ref } from 'vue'

const layout = ref([
  { h: 2, id: 0, w: 2, x: 0, y: 0 },
  { h: 2, id: 1, w: 2, x: 2, y: 0 },
  { h: 2, id: 2, w: 2, x: 4, y: 0 },
  { h: 2, id: 3, w: 2, x: 0, y: 2 },
  { h: 2, id: 4, w: 2, x: 2, y: 2 },
  { h: 2, id: 5, w: 2, x: 4, y: 2 },
  { h: 2, id: 6, w: 2, x: 0, y: 4 },
  { h: 2, id: 7, w: 2, x: 2, y: 4 },
  { h: 2, id: 8, w: 2, x: 4, y: 4 },
  { h: 2, id: 9, w: 2, x: 0, y: 6 },
  { h: 2, id: 10, w: 2, x: 2, y: 6 },
  { h: 2, id: 11, w: 2, x: 4, y: 6 }
])
</script>

<template>
  <grid-layout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    @noc-resize="handleResize"
    @noc-move="handleMove"
    @noc-move-end="handleMoveEnd"
  >
    <template #item="{ item }">
      {{ item.id }}
    </template>
  </grid-layout>
</template>

or

<script setup>
import { ref } from 'vue'

const layout = ref([
  { h: 2, id: 0, w: 2, x: 0, y: 0 },
  { h: 2, id: 1, w: 2, x: 2, y: 0 },
  { h: 2, id: 2, w: 2, x: 4, y: 0 },
  { h: 2, id: 3, w: 2, x: 0, y: 2 },
  { h: 2, id: 4, w: 2, x: 2, y: 2 },
  { h: 2, id: 5, w: 2, x: 4, y: 2 },
  { h: 2, id: 6, w: 2, x: 0, y: 4 },
  { h: 2, id: 7, w: 2, x: 2, y: 4 },
  { h: 2, id: 8, w: 2, x: 4, y: 4 },
  { h: 2, id: 9, w: 2, x: 0, y: 6 },
  { h: 2, id: 10, w: 2, x: 2, y: 6 },
  { h: 2, id: 11, w: 2, x: 4, y: 6 }
])
</script>

<template>
  <grid-layout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
  >
    <template #default="{ gridItemProps }">
      <grid-item
        v-for="item in layout"
        v-bind="gridItemProps"
        :id="item.id"
        :key="item.id"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        @noc-resize="handleResize"
        @noc-move="handleMove"
        @noc-move-end="handleMoveEnd"
      >
        {{ item.id }}
      </grid-item>
    </template>
  </grid-layout>
</template>

Props

GridLayout Props

Properties with no default values are Required

Name	Type	Default Value	Description
colNum	number		Number of columns in the grid.
layout	Layout		Initial layout of the grid.
autoSize	boolean	true	Automatically adjust the size of items.
breakpoints	Breakpoints	{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }	Responsive breakpoints for grid.
cols	Breakpoints	{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }	Number of columns at different breakpoints.
horizontalShift	boolean	false	Allow horizontal shifting of items.
intersectionObserverConfig	IntersectionObserverConfig	{ root: null, rootMargin: '8px', threshold: 0.40 }	Configuration for the Intersection Observer.
isDraggable	boolean	true	Enable dragging of grid items.
isResizable	boolean	true	Enable resizing of grid items.
margin	number[]	[10, 10]	Margin around grid items.
maxRows	number	Infinity	Maximum number of rows in the grid.
preventCollision	boolean	false	Prevent items from colliding with each other.
responsive	boolean	false	Enable responsive layout.
responsiveLayouts	ResponsiveLayout	{}	Responsive layouts for different breakpoints.
rowHeight	number	150	Height of each row in the grid.
useCssTransforms	boolean	true	Use CSS transforms for positioning.
useObserver	boolean	false	Use Intersection Observer for item visibility.
verticalCompact	boolean	true	Enable vertical compacting of items.

GridItem Props

Properties with no default values are Required

Name	Type	Default Value	Description
breakpointCols	Breakpoints		Number of columns at different breakpoints.
colNum	number		Number of columns in the grid.
containerWidth	number		Width of the container.
h	number		Height of the grid item.
id	Id		Unique identifier for the grid item.
isDraggable	boolean		Enable dragging of the grid item.
isResizable	boolean		Enable resizing of the grid item.
lastBreakpoint	BreakpointsKeys		Last breakpoint at which the item was resized.
margin	number[]		Margin around the grid item.
maxRows	number		Maximum number of rows the item can occupy.
rowHeight	number		Height of each row the item occupies.
useCssTransforms	boolean		Use CSS transforms for positioning.
w	number		Width of the grid item.
x	number		X position of the grid item.
y	number		Y position of the grid item.
dragAllowFrom	string | null	null	Selector for allowing drag from specific elements.
dragIgnoreFrom	string	'a, button'	Selector for elements to ignore during drag.
dragOption	object	{}	Options for configuring drag behavior.
maxH	number	Infinity	Maximum height of the grid item.
maxW	number	Infinity	Maximum width of the grid item.
minH	number	1	Minimum height of the grid item.
minW	number	1	Minimum width of the grid item.
observer	IntersectionObserver | undefined	undefined	Intersection Observer for item visibility.
isStatic	boolean	false	Make the grid item static (non-draggable).

Custom Events

Every custom event is prefixed with noc so it will not collide with default events

This does not include events that update a value written in a v-model

GridLayout Events

Name	Payload	Description
noc-intersection-observe	id: Id[]	Notify when items are observed for intersection.
noc-intersection-unobserve	id: Id[]	Notify when items are unobserved for intersection.
noc-item-move	GridItemEvents['noc-move']	Notify when a grid item is being moved.
noc-item-move-end	GridItemEvents['noc-move-end']	Notify when a grid item's move operation ends.
noc-item-resize	GridItemEvents['noc-resize']	Notify when a grid item is being resized.
noc-item-resize-end	GridItemEvents['noc-resize-end']	Notify when a grid item's resize operation ends.
noc-layout-before-mount	layout: Layout	Notify before the grid layout is mounted.
noc-layout-create	layout: Layout	Notify when a new layout is created.
noc-layout-mount	layout: Layout	Notify when the grid layout is mounted.
noc-layout-ready	layout: Layout	Notify when the grid layout is ready.
noc-layout-update	layout: Layout	Notify when the grid layout is updated.
noc-resize-container	payload: ResizePayload	Notify when the container is resized.

GridLayout v-model

v-model's are not prefixed with noc

Name	Payload	Description
update:layout	layout: Layout	Updates the Layout
update:breakpoints	breakpoints: BreakpointsKeys	Updates the Breakpoints

GridItem Events

Name	Payload	Description
noc-resize-container	payload: ResizePayload	Notify when the container is resized.
noc-resize	payload: ResizePayload	Notify when a grid item is being resized.
noc-resize-end	payload: ResizePayload	Notify when a grid item's resize operation ends.
noc-move	payload: MovePayload	Notify when a grid item is being moved.
noc-move-end	payload: MovePayload	Notify when a grid item's move operation ends.