Draggable And Sortable Grid System For Vue.js – Vue.js Grid

This is a responsive grid system for Vue.js 2.x app that supports smooth sorting, drag-n-drop, and reordering.

Usage:

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
  }
},

Preview:

Download Details:

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

Install & Download:

# NPM
$ npm install vue-js-grid --save