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. |