Vue3 grid layout with resize, drag and responsive
npm install @noction/vue-draggable-gridGrid layout for vue 3 with draggable, resize, responsive events
Rewrote to TypeScript, Composition API and migrated to Vue3
js
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')
`
`vue
v-model:layout="layout"
:col-num="12"
:row-height="30"
@noc-resize="handleResize"
@noc-move="handleMove"
@noc-move-end="handleMoveEnd"
>
{{ item.id }}
`
or
`vue
v-model:layout="layout"
:col-num="12"
:row-height="30"
>
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 }}
`$3
#### 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). |$3
_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. |