Vue Grid Layout

A draggable and resizable grid layout, for Vue.js.

Heavily inspired in React-Grid-Layout

Features

• Draggable widgets
• Resizable widgets
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored

Installation

Install the vue-grid-layout package package using npm:

npm install vue-grid-layout

Usage

    var testLayout = [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        {"x":2,"y":0,"w":2,"h":4,"i":"1"},
        {"x":4,"y":0,"w":2,"h":5,"i":"2"},
        {"x":6,"y":0,"w":2,"h":3,"i":"3"},
        {"x":8,"y":0,"w":2,"h":3,"i":"4"},
        {"x":10,"y":0,"w":2,"h":3,"i":"5"},
        {"x":0,"y":5,"w":2,"h":5,"i":"6"},
        {"x":2,"y":5,"w":2,"h":5,"i":"7"},
        {"x":4,"y":5,"w":2,"h":5,"i":"8"},
        {"x":6,"y":4,"w":2,"h":4,"i":"9"},
        {"x":8,"y":4,"w":2,"h":4,"i":"10"},
        {"x":10,"y":4,"w":2,"h":4,"i":"11"},
        {"x":0,"y":10,"w":2,"h":5,"i":"12"},
        {"x":2,"y":10,"w":2,"h":5,"i":"13"},
        {"x":4,"y":8,"w":2,"h":4,"i":"14"},
        {"x":6,"y":8,"w":2,"h":4,"i":"15"},
        {"x":8,"y":10,"w":2,"h":5,"i":"16"},
        {"x":10,"y":4,"w":2,"h":2,"i":"17"},
        {"x":0,"y":9,"w":2,"h":3,"i":"18"},
        {"x":2,"y":6,"w":2,"h":2,"i":"19"}
    ];

    var GridLayout = VueGridLayout.GridLayout;
    var GridItem = VueGridLayout.GridItem;

    new Vue({
        el: '#app',
        components: {
            GridLayout,
            GridItem,
        },
        data: {
            layout: testLayout,
        },
    });

        <grid-layout
                            :layout.sync="layout"
                            :col-num="12"
                            :row-height="30"
                            :is-draggable="true"
                            :is-resizable="true"
                            :vertical-compact="true"
                            :margin="[10, 10]"
                            :use-css-transforms="true"
            >

                    <grid-item v-for="item in layout"
                                         :x.sync="item.x"
                                         :y.sync="item.y"
                                         :w.sync="item.w"
                                         :h.sync="item.h"
                                         :i="item.i">
                            {{item.i}}
                    </grid-item>
            </grid-layout>

Check its Github page: jbaysolutions/vue-grid-layout

Demo

Submitted by Gustavo Santos