dnd-grid
A vuejs grid with draggable and resizable boxes
Demo page
The demo requires Vue >= 2.3.0 because of the ":layout.sync" feature
The components require Vue >= 2.0.0
Usage
Example
<dnd-grid-container :layout.sync="layoutJson">
<dnd-grid-box :boxId="box1Id">
<h1>Box 1</h1>
</dnd-grid-box>
<dnd-grid-box :boxId="box2Id">
<h1>Box 2</h1>
</dnd-grid-box>
...
</dnd-grid-container>
Layout JSON
[
{
id: 'box-a',
hidden: false,
pinned: false,
position: {
x: 0,
y: 0,
w: 4,
h: 2
}
},
{
id: 'box-b',
hidden: false,
pinned: false,
position: {
x: 4,
y: 0,
w: 2,
h: 1
}
},
...
]
Property | Description |
---|
id | The id of the box linked with this box layout (must be unique) |
hidden | hide or show the box |
pinned | If pinned, the box can not be dragged/resized and always stays in place |
position | The position/size in the grid |
Installation
Using npm
npm i --save @dattn/dnd-grid
How to import (using ES6 import)
import { Container, Box } from '@dattn/dnd-grid'
import '@dattn/dnd-grid/dist/index.css'
Setup component
<script>
export default {
components: {
DndGridContainer: Container,
DndGridBox: Box
}
}
</script>
License
This project is licensed under MIT License