vue-draggable-grid


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

Rewrote to TypeScript, Composition API and migrated to Vue3

$3

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



`
or
`vue



`

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