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

Overview

Vue Grid Layout

vue-grid-layout

Documentation Website

What is Vue Grid Layout?

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

Features

  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Automatic RTL support (resizing not working with RTL on 2.2.0)
  • Responsive

Current version: 2.3.12 (Supports Vue 2.2+)

For legacy browsers, like IE11, use version 2.3.12-legacy

For Vue 2.1.10 and below use version 2.1.3

For Vue 1 use version 1.0.3

Documentation

Check out the Documentation Website

Projects using vue-grid-layout

Know of others? Create a PR to let me know!

Contribute

If you have a feature request, please add it as an issue or make a pull request.

Developed by JBay Solutions

Issues
  • new function autoSize

    new function autoSize

    function autoSize can be called from within the Slot-item, for example: if(this.$parent.autoSize) this.$parent.autoSize(); i don't know much About your components, i'm sure there will be an easier /better way to do this, but this is working for me

    why: i use it to arrange multiple statistics. of course they can be bigger or smaller, depends on configuration and data, so i never now how much space is needed. now i can call autosize of loading is finished and the grid-item will Change ist size

    opened by mech01nc01 22
  • 2.3.11 build error

    2.3.11 build error

    ERROR in ./node_modules/vue-grid-layout/dist/vue-grid-layout.common.js Module parse failed: Unexpected token (10332:31) You may need an appropriate loader to handle this file type. | subModification.prepareStates(modifiers); | state.subModification = subModification; | subModification.startAll({ ...arg | }); | },

    opened by foxFallingSkies 18
  • initial responsive version

    initial responsive version

    my try for including responsive features. please look into it and give feedback

    opened by shpfive 14
  • responsive v2

    responsive v2

    updated to new structure and fixed Bug when adding or removing elements from grid Please have a look into it :)

    responsive is set via prop

    opened by shpfive 12
  • Resized event is called too many times

    Resized event is called too many times

    Software version (please complete the following information):

    • Browser [ chrome]
    • Vue Version [ 2.5.7]
    • vue-grid-layout Version: [2.3.3]

    Describe the bug In documentation you said that resizedEvent is called 'Every time an item is finished being resized and changes size'.

    However after some tests it seems that resized event is called too many times.

    For example on layout creation and also when I start resizing and during resizing.

    To Reproduce Steps to reproduce the behavior:

    1. Create a simple layout
    2. Add a resized event and check the console

    Expected behavior ResizedEvent should be called when user stop to resize and lift the resize handler. Otherwise I don't have any clue when a resize action is ended.

    A solution can be to have a resizeStop event.

    Check this: https://codesandbox.io/s/vue-template-1vcqv?fontsize=14

    enhancement next 
    opened by Tropicalista 12
  • Library crash on startup in AMD project

    Library crash on startup in AMD project

    Hi, I have an AMD project (requirejs) with Vue.js 2.5...once that the umd file is loaded i see the foolowing error message:

    vue-grid-layout.js?v=1.0.0.0:6756 Uncaught TypeError: Cannot read property 'component' of undefined
        at vue-grid-layout.js?v=1.0.0.0:6756
        at Array.forEach (<anonymous>)
        at Module.fb15 (vue-grid-layout.js?v=1.0.0.0:6755)
        at __webpack_require__ (vue-grid-layout.js?v=1.0.0.0:30)
        at vue-grid-layout.js?v=1.0.0.0:94
        at vue-grid-layout.js?v=1.0.0.0:97
        at Object.execCb (require.js:1696)
        at Module.check (require.js:883)
        at Module.enable (require.js:1176)
        at Module.init (require.js:788)
    

    ...seems that there is something wrong on load, requiring webpack anyway.

    opened by Micene09 10
  • how to disable resize vertical

    how to disable resize vertical

    I'm doing a project which only permit resize the element horizontally, but there is no option to fit. So how to disable the resize function of vertical direction?Thx~

    question 
    opened by iamwelk 10
  • Touch dragging of GridItem doesn't work as expected on mobile Android devices

    Touch dragging of GridItem doesn't work as expected on mobile Android devices

    Hi gmsa,

    first i'd like to thank you for this great component. I use it since early 2017. I've migrated my project to the newest version 2.2.0. Everything works fine, except the mobile experience on Android. The touch behavior on Android, isn't as good as on iOS devices. On Android, I can't drag around the GridItems. On iOS devices it's smooth and works properly. I'd like to create a PR, but i can't get the project work locally. Do I need to do something special?

    Many thanks in advance

    enhancement help wanted 
    opened by pbabey 10
  • "TypeError: Super expression must either be null or a function" when built with webpack on version 2.3.9

    Software version:

    • Browser: Google Chrome Version 85.0.4183.121 (Official Build) (64-bit)
    • Vue Version: 2.6.12
    • vue-grid-layout Version: 2.3.9

    Describe the bug When vue-grid-layout is updated from 2.3.8 to 2.3.9, my project starts to throw an error when trying to open a page where the vue-grid-layout is used:

    vendor.e2d7ffc643d1eaf0ca78.js:22 TypeError: Super expression must either be null or a function
        at 0.7047a8ba9ffdfea99f38.js:8
        at 0.7047a8ba9ffdfea99f38.js:8
        at 0.7047a8ba9ffdfea99f38.js:8
        at Object.5014 (0.7047a8ba9ffdfea99f38.js:8)
        at n (0.7047a8ba9ffdfea99f38.js:8)
        at Object.bc21 (0.7047a8ba9ffdfea99f38.js:8)
        at n (0.7047a8ba9ffdfea99f38.js:8)
        at Object.<anonymous> (0.7047a8ba9ffdfea99f38.js:8)
        at Object.2af9 (0.7047a8ba9ffdfea99f38.js:8)
        at n (0.7047a8ba9ffdfea99f38.js:8)
    
    l | @ | vendor.e2d7ffc….js:22
    -- | -- | --
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | Promise.then (async) |   |  
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | Lt | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | g | @ | vendor.e2d7ffc….js:22
      | i | @ | vendor.e2d7ffc….js:22
      | i | @ | vendor.e2d7ffc….js:22
      | i | @ | vendor.e2d7ffc….js:22
      | i | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | vendor.e2d7ffc….js:22
      | (anonymous) | @ | app.60df97a….js:1
      | g | @ | vendor.e2d7ffc….js:22
      | i | @ | vendor.e2d7ffc….js:22
      | i | @ | vendor.e2d7ffc….js:22
      | _t | @ | vendor.e2d7ffc….js:22
      | Ft.confirmTransition | @ | vendor.e2d7ffc….js:22
      | Ft.transitionTo | @ | vendor.e2d7ffc….js:22
      | e.push | @ | vendor.e2d7ffc….js:22
      | Wt.push | @ | vendor.e2d7ffc….js:22
      | w | @ | vendor.e2d7ffc….js:22
      | Wt | @ | vendor.e2d7ffc….js:1416
      | n | @ | vendor.e2d7ffc….js:1416
      | s._wrapper | @ | vendor.e2d7ffc….js:1416
    

    Everything works fine on 2.3.8.

    To Reproduce Steps to reproduce the behavior:

    1. Build a project with webpack v3
    2. Try open a page where vue-grid-layout is used
    3. See error

    Expected behavior No error.

    Screenshots vue-grid-layout-2 3 9

    opened by savandriy 10
  • Breaks Chrome

    Breaks Chrome

    Software version (please complete the following information):

    • Browser: Chrome 85.0.4183.121; Firefox 80.0.1
    • Vue Version: 2.6.12
    • vue-grid-layout version: 2.3.9

    Describe the bug When using dynamic data for layout and items, dragging a widget causes Chrome to freeze. The tab that is displaying the grid is entirely frozen, and any tab that called that tab (like a navbar to load the dashboard tab) is also frozen. F5 has no effect on any affected tab, and Chrome becomes almost unresponsive across all tabs. Closing the offending dashboard (grid view) tab does not restore functionality to the calling tab. Instead, all tabs that were ever related to the grid view must be closed to free up Chrome. Absolutely no problems in Firefox! No JS errors on either console (Chrome or Firefox), and no indication of what is causing Chrome to so totally puke as soon as the drag operation starts.

    Please use the CodeSandbox Template to demonstrate your bug. It is much easier for us to help you if you do.

    Sorry, it's a commercial application, and the container code (and the widgets) is/are proprietary.

    To Reproduce Steps to reproduce the behavior:

    1. Run a dynamic dataset grid of at least two widgets on Chrome and Firefox.
    2. Drag one of the widgets in both browsers.
    3. Observe everything work perfectly on Firefox and entirely freeze Chrome.

    Expected behavior Vue-grid-layout should work in Chrome as it does in Firefox.

    Screenshots The description should be adequate.

    Additional context The fact that there are no errors and that Firefox runs the same code perfectly tells me that something about how the two browsers are handling the vue-grid-layout drag event is different. Something about this event is problematical, and I don't have time to dig through the vue-grid-layout code to see what could be causing this.

    opened by madbolter 10
  • 如何向右一直拖动,出现滚动条,不是自动向下?

    如何向右一直拖动,出现滚动条,不是自动向下?

    如何向右一直拖动,出现滚动条,不是自动向下?

    opened by lininn 0
  • Vue 3 Composition-api example

    Vue 3 Composition-api example

    Seeing that the vue 3 branch is getting some love, though I could not find an example in the docs using the composition-api

    
    <template>
      <div>
        <div class="layoutJSON">
          Displayed as
          <code>[x, y, w, h]</code>:
          <div class="columns">
            <div class="layoutItem" v-for="item in layout" :key="item.i">
              <b>{{ item.i }}</b>
              : [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
            </div>
          </div>
        </div>
        <button @click="addItem">Add an item dynamically</button>
        <input type="checkbox" v-model="draggable" /> Draggable
        <input type="checkbox" v-model="resizable" /> Resizable
        <grid-layout
          :layout="layout"
          :col-num="colNum"
          :row-height="30"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :vertical-compact="true"
          :use-css-transforms="true"
        >
          <grid-item
            :key="item"
            v-for="item in layout"
            :static="item.static"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
          >
            <span class="text">{{ item.i }}</span>
            <span class="remove" @click="removeItem(item.i)">x</span>
          </grid-item>
        </grid-layout>
      </div>
    </template>
    
    <script>
    import { onMounted, reactive, toRefs } from 'vue'
    import { useStorage } from '@vueuse/core'
    export default {
    
      setup() {
    
        onMounted(() => {
          dragAttrs.index = dragAttrs.layout.length;
        });
    
       //use local storage via vueuse
    
        // const dragAttrs = reactive({
        //   layout: useStorage('layout', []),
        //   draggable: useStorage('draggable', true),
        //   resizable: useStorage('resizable', true),
        //   colNum: useStorage('colNum', 12),
        //   index: useStorage('index', 0),
        //   responsive: useStorage('responsive', true)
        // });
    
        const dragAttrs = reactive({
          layout: [],
          draggable: true,
          resizable: true,
          colNum: 12,
          index: 0,
          responsive: true
        });
    
    
        function addItem() {
          dragAttrs.layout.push({
            x: (dragAttrs.layout.length * 2) % (dragAttrs.colNum || 12),
            y: dragAttrs.layout.length + (dragAttrs.colNum || 12),
            w: 2,
            h: 2,
            i: dragAttrs.index,
          });
          dragAttrs.index++;
          window.dispatchEvent(new Event("resize"));
        }
    
        function removeItem(val) {
          const index = dragAttrs.layout.map(item => item.i).indexOf(val);
          dragAttrs.layout.splice(index, 1);
        }
    
        return {
          addItem, removeItem,
          ...toRefs(dragAttrs)
        }
    
      },
    
    }
    </script>
    
    
    opened by Fanna1119 0
  • this.$slots used as a function in beta

    this.$slots used as a function in beta

    Software version (please complete the following information):

    • vue-grid-layout Version: 3.0.0-beta1

    Describe the bug In autoSize method the $slots is being used as a function, which leads to the error (this.$slots is not a function). Introduced here: https://github.com/jbaysolutions/vue-grid-layout/commit/60f1fa556a31bd021383403a56b056ac3b56d693#diff-a4ebc513e4694019068b60646e814e1c1142515d4cf0884062ca83d5126af805R851

    opened by kozubikmichal 0
  • Wrong layout generated in responsive mode

    Wrong layout generated in responsive mode

    Software version (please complete the following information):

    • Browser: Chrome Version 91.0.4472.114 (Official Build) (x86_64)
    • Vue Version 2.6.14
    • vue-grid-layout Version: 2.3.12

    Describe the bug When in responsive mode, the layout gets generated in a weird way as you resize the window. Please check my codepen: https://codepen.io/szokeptr/pen/oNWNLKp

    Screenshots https://assets.codepen.io/319703/Screen+Shot+2021-06-28+at+16.04.45.png

    opened by szokeptr 2
  • Excuse me, why is the delete button missing in the upper right corner of the vue3 grid layout I built with vite? Do you still have the delete button?

    Excuse me, why is the delete button missing in the upper right corner of the vue3 grid layout I built with vite? Do you still have the delete button?

    Excuse me, why is the delete button missing in the upper right corner of the vue3 grid layout I built with vite? Do you still have the delete button?

    opened by TianVast 0
  • A demo for horizontal swapping

    A demo for horizontal swapping

    I went through the issues and found that some people wanted to have some sort of system to allow horizontal swapping between items, where two items on the same row can be swapped without touching the rest of the grid. I needed this too but it looks like vue-grid-layout doesn't support it for now, and since i really like this library and i need it, i decided to give it a try and implement it myself.

    The solution i came up with is very basic: it uses the moveEvent() and preventCollision set to true to detect when an item is being dragged over another item, and when it does it will swap the position of the two items in the grid. It seems to work, but since my code is not so good and it's very basic (it needs to be tested and adapted to work in all the cases) i decided not to create a PR but instead i created this issue, so that it can be a starting point for anyone else who needed this or wanted to improve this solution.

    Here is a simple codesandbox: https://codesandbox.io/s/dazzling-burnell-rmwbk?file=/src/App.vue

    opened by Jacks349 1
Releases(2.3.12-legacy)
🗃️Smart widget is a flexible and extensible content container component for Vue2.x.

vue-smart-widget Smart widget is a flexible and extensible content container component. It includes header and body part, and widget body includes edi

Yunwei Xiao 73 Jul 15, 2021
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 4.8k Jul 22, 2021
A Vue wrapper component for SlickGrid

Vue Slimgrid A simple Vue wrapper component for SlickGrid using SlickGrid-ES6 as a foundation! Includes some additional plugins/features built-in: Sli

Rob White 49 May 28, 2021
Golden layout integration in vue

vue-golden-layout Integration of the golden-layout to Vue Installation npm i -S vue-golden-layout Fast example <golden-layout> <gl-row> <gl-comp

null 155 Jul 12, 2021
Vue Layout System is a pack of Vue components that solve daily layout problems.

A pack of Vue components that solve daily layout problems

boyin.lee 8 Jul 2, 2021
Vue Layout System is a pack of Vue components that solve daily layout problems.

Vue Layout System is a pack of Vue components that solve daily layout problems.

boyin.lee 6 May 30, 2021
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

André Lins 17 Jun 20, 2021
A vuejs grid with draggable and resizable boxes

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

null 300 Jul 1, 2021
Default layout or create custom layouts for the pages of your Vue.js SPA (Multiple layouts)

vue-extend-layout A simple extend the default layout or create custom layouts for your SPA Vue.js, using dynamic import component. For vue-extend-layo

Alan Ktquez 132 May 20, 2021
Responsive, Draggable & Resizable Dashboard (Grid) for Vue

vue-responsive-dash A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript. Inspired by React-Grid-Layout & Vue-Grid-Layout

Ben Sladden 154 Jul 23, 2021
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 891 Jul 24, 2021
A VueJS flexbox partitionable layout

A VueJS flexbox partitionable layout

José Porto 1 Aug 30, 2020
grid layout,support flex

simple-grid a simple grid layout(Vue Component) Installation use npm $ npm i simple-xgrid --save import Grid from 'simple-xgrid' import 'simple-xgrid

zhoulin 24 Jun 8, 2021
🧙‍♂️🔌 Responsive Magic Grid for Vue

Vue-Magic-Grid This is a Vue.js port of @e-oj's Magic Grid. Please check the /test folder for a example. If you use images, make sure they have a set

Emmanuel Olaojo 165 Jul 24, 2021