1.11.0 • Published 1 month ago
@noction/vue-draggable-grid v1.11.0
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. |
1.11.0
1 month ago
1.10.1
2 months ago
1.10.0
3 months ago
1.9.16
4 months ago
1.10.0-beta.5
4 months ago
1.10.0-beta.4
4 months ago
1.10.0-beta.2
4 months ago
1.10.0-beta.1
4 months ago
1.9.15
4 months ago
1.9.14
4 months ago
1.9.12
4 months ago
1.9.11
6 months ago
1.9.10
6 months ago
1.9.9
6 months ago
1.9.8
6 months ago