This is a responsive grid system for Vue.js 2.x app that supports smooth sorting, drag-n-drop, and reordering.
# NPM
$ npm install vue-js-grid --save
Import the Vue.js Grid.
import Vue from 'vue'
import Grid from 'vue-js-grid'
Vue.use(Grid)
Define your grid data.
data () {
return {
items: [
'1',
'2',
'3'
]
}
Use it in your component.
<grid
:draggable="true"
:sortable="true"
:items="items"
:height="100"
:width="100">
<template slot="cell" scope="props">
<div>{{props.item}}</div>
</template>
</grid>
Default props.
props: {
items: {
type: Array,
default: () => []
},
gridWidth: {
type: Number,
default: -1
},
cellWidth: {
type: Number,
default: 80,
},
cellHeight: {
type: Number,
default: 80
},
draggable: {
type: Boolean,
default: false
},
dragDelay: {
type: Number,
default: 0
},
sortable: {
type: Boolean,
default: false
},
center: {
type: Boolean,
default: false
}
},
Author: euvl
Live Demo: https://euvl.github.io/vue-js-grid/
Download Link: https://github.com/euvl/vue-js-grid/archive/master.zip
Official Website: https://github.com/euvl/vue-js-grid
#vuejs #javascript #vue-js #vue