A vuejs grid with draggable and resizable boxes

Related tags

UI Layout dnd-grid
Overview

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" resizeVisible>
        <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, // Multiplier for virtual grid width
            h: 2 // Multiplier for virtual grid height
       }
    },
    {
        id: 'box-b',
        hidden: false,
        pinned: false,
        position: {
            x: 4,
            y: 0,
            w: 2,
            h: 1
        }
    },
    ...
]

Container:

Property Default Description
layout Array of objects each representing a box with the below Object properties
- 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
- - x The x position in the grid by cells
- - y The y position in the grid by cells
- - w The width in the grid by cells
- - h The height in the grid by cells
cellSize Object describing the default cell size
- w 100 Width in pixels
- h 100 Height in pixels
maxColumnCount infinity Integer max columns
maxRowCount infinity Integer max rows
margin 5 Integer in pixels
outerMargin 0 Integer in pixels
bubbleUp false Boolean when true bubbles boxes to the top of the screen
autoAddLayoutForNewBox true Boolean
defaultSize Default size of a new box
- w 1 Width in cells
- h 1 Height in cells
fixLayoutOnLoad true Boolean describing to fix layout (overlaps) on load

Box:

Property DEFAULT Description
boxId ! String, Box id, this is a required field
dragSelector * String, id of the element by which you can drag the box
resizeVisible false Boolean, displays a circle the corner of boxes on mobile devices

Installation

Using npm or yarn

npm i --save @dattn/dnd-grid

yarn install @dattn/dnd-grid

How to import (using ES6 import)

// import Container and Box components
import { Container, Box } from '@dattn/dnd-grid'
// minimal css for the components to work properly
import '@dattn/dnd-grid/dist/dnd-grid.css'

Setup component

<script>
export default {
    components: {
        DndGridContainer: Container,
        DndGridBox: Box
    }
}
</script>

License

This project is licensed under MIT License

Comments
  • Possibility to wrap GridBox

    Possibility to wrap GridBox

    Is possible to wrap a GridBox component in your own component? For example:

    <template>
    <dnd-grid-box class="container" :boxId="boxId" dragSelector="div.header">
      <div class="header">Header</div>
      <div class="content">Content</div>
    </dnd-grid-box>
    </template>
    (...)
    

    So that it can be used as such:

    <div id="app">
      <dnd-grid-container :layout.sync="layoutJson">
        <container boxId="box1Id"/>
      </dnd-grid-container>
    </div>
    

    This Container can then of course be whatever you want.

    This way of doing it throws an error. I assume this is because GridBox tries to reference GridContainer, but finds the custom Container class instead. image

    opened by surgura 6
  • Unable to use

    Unable to use

    When following the instructions to setup the component import { Container, Box} from '@dattn/dnd-grid'; Both imported objects "Container" and "Box" are both undefined. When checking de .js it looks like it's been minified and I can't find any reference to Container and Box.

    So atm of writing this - I can't use your plugin...

    opened by ThaDaVos 5
  • Workarounds for webpack import on vue-cli

    Workarounds for webpack import on vue-cli

    The code segment in README.md do not work for projects managed with vue-cli, which depends on webpack.

    // import Container and Box components
    import { Container, Box } from '@dattn/dnd-grid'
    // minimal css for the components to work properly
    import '@dattn/dnd-grid/dist/index.css'
    

    Container and Box are undefined. I was able to work around this problem with the code below:

    import dnd from "@dattn/dnd-grid";
    import "@dattn/dnd-grid/dist/dnd-grid.css";
    
    export default {
      name: "app",
      components: {
        DndGridContainer: dnd.Container,
        DndGridBox: dnd.Box
      }
    

    Has anyone found a better way to do this?

    opened by jennydaman 3
  • Vue 3 support

    Vue 3 support

    Is there Vue 3 support? When I install plugin I get errors like "selfHook.bind is not a function" But when i install it in Vue2 the are no problems

    opened by 0SilentFox0 2
  • In templates camelcase gets converted to kebab-case

    In templates camelcase gets converted to kebab-case

    Vue.JS strongly recommends using kebab-case in templates. Camelcase data attribute names get converted to kebab-case, preventing dnd-grid from being used with grid boxes in templates.

    For example, a template:

    <template>
      <dnd-grid-box :boxId="boxId">
        <h1 v-html="boxId"></h1>
      </dnd-grid-box>
    </template>
    

    Gets converted in the DOM to:

    <dnd-grid-box box-id="box-1">
      <h1>box-1</h1>
    </dnd-grid-box>
    

    Because the prop data attributes gets assigned to box-id, dnd-grid fails to initialize the box.

    Any idea how to work around that? It would be nice to break up a large grid into templates.

    opened by tyrauber 1
  • Feature/other box flow

    Feature/other box flow

    This will change how boxes moves when moving other widgets. Each box will have a remove widget button in the upper right corner.

    layout.js. This class keeps the layout of the grid. It is also responsible to control how the boxes are moved when one box is moved

    grid.js:

    • Removing all functions that are not in use anymore due to the new layout class

    guid.js:

    • Added to create unique ids while adding new widgets

    Container.vue:

    • Updated to utilize the new layout class. Now also have support for touch enabled computers

    Gallery.vue:

    • A simple component to show all available widgets that may be added onto the grid

    box.js, widget.js:

    • Classes used for properties of the box. The Widget class will keep the properties for widgets that will be inside the Box class
    opened by danielnord 1
  • Can you nest instances?

    Can you nest instances?

    Hi are you able to nest boxes within boxes in a parent child relationship? Meaning I would like to have a few parent boxes that tie to a form fieldset. Then I'd like to be able to move input groups around within the fieldset. Is this use-case possible?

    opened by thinkstylestudio 1
  • [Solved]  I need my own height from existing element div.

    [Solved] I need my own height from existing element div.

    I had an issue with my own height getting from exisiting divs. I handled that issue with propsData and same Id on element I want height from.

    app.js

        var layout = [
            {
                id: 1,
                hidden: false,
                pinned: false,
                position: {
                    x: 0,
                    y: 0,
                    w: 4,
                    h: 1,
                }
            },
        ];
    
        var gridSize = {
                w: 100,
                h: 100
        };
    
        var margin =  5;
    
        for(var i = 0 ; i < layout.length;i++) {
            var id = layout[i].id.toString();
            var newH = (document.getElementById(id).offsetHeight + margin) / (gridSize.h + margin);
            layout[i].position.h = newH;
        }
    
    
        const app = new Vue({
            el: '#app',
            props: ['userId', 'layout', 'gridSize', 'margin'],
            propsData: {
                userId: userId.data.userId,
                layout: layout,
                gridSize : gridSize,
                margin : margin
            },
    

    html (with vue)

        <dnd-grid-box
            :box-id="1"
             :key="1"
             drag-selector="div.label"
         >
            <div id="1">
    

    This may help others in similar problems.

    opened by lrembacz 1
  • Installs wrong package

    Installs wrong package

    Running npm i --save dnd-grid installs another project's package:

    https://github.com/thomaswright/dnd-grid

    Any idea to how to explicitly install this instead?

    Thanks.

    opened by RoanBrand 1
  • stop resize pushing boxes outside of layout when max-cols/max-rows was set

    stop resize pushing boxes outside of layout when max-cols/max-rows was set

    When resizing a full grid, the other boxes get pushed to the bottom going out of the boundaries of max columns and rows. Any idea how to stop this behaviour? Or at least if the json layout was updated with the new positions...

    opened by romucci 0
  • v0.0.11

    v0.0.11

    • utils are now exported/public
    • new maxColumnCount and maxRowCount properties to limit container size
    • renamed gridSize to cellSize
    • some performance improvements
    • use poi instead of vue-cli build because of deprecation
    opened by dattn 0
  • Customizable grid and extra attributes

    Customizable grid and extra attributes

    Features added:

    • emitted events for dragging now send the full payload (props) of a matching boxlayout into the callback function. I added this to know the contents of the box I was picking up and dragging as I include js meta-data in my use-cases.

    Properties added:

    • nogrid - if true, hides grid and respective styles. Default is false
    • noplaceholder - if true hides placeholder styling. Default is false
    • dynamicResize - if false, reverts the layout if either a drag-n-drop or resize result would expand the container. Also if false, forces the css to match the exact width and height of the container. Default is true
    • placeholderStyle - can take in a vue css* object and apply it on the placeholder. Default is gold dashed-lines and darkens grid.
    • gridStyle - grid configuration object. Default values are explained below

    gridStyle is a configuration to style the container as a grid and even include smaller, mini grids inside each cell/boxlayout:

    • backgroundColor - css string of container background color
    • color - css string for the color of the cell-splitting lines
    • thickness - css string for the thickness of the cell-splitting lines
    • position - css string for the position offset of the cell-splitting lines
    • innerGrid - object that provides additional configuration for the "mini grid" inside each cell

    innerGrid can be configured with the following properties:

    • cols - number of columns inside each cell/boxlayout
    • rows - number of rows inside each cell/boxlayout
    • color - css string of the color for the inner grid lines
    • position - css string of the position offset for the inner grid lines
    • thickness - css string of the thickness for the inner grid lines

    The default object values for gridStyle object are as follows:

     {
        backgroundColor: "rgb(47, 122, 202)",
        color: "white",
        thickness: "2px",
        position: "-4px -4px, -4px -4px",
        innerGrid: {
            cols: 4,
            rows: 4,
            color: "#b0b0b0",
            position: "-2px -2px, -2px -2px",
            thickness: "1px"
        }
    }
    

    Image preview: Image Preview

    * vue css object example

    {
      border: '2px dashed gold',
      background: 'rgba(0,0,0,0.2)',
      zIndex: '0'
    }
    
    opened by TheMaverickProgrammer 0
  • Possible/how to show grid itself?

    Possible/how to show grid itself?

    I was able to add border line to outside edge of grid with the following css:

    .dnd-grid-container{border:2px dashed #000;z-index:0;}
    

    But so far haven't figured out how to display edges for inner cells.

    Is there a way to do it?

    Thanks.

    opened by zhiyong-ft 2
  • Responsive !

    Responsive !

    When running this nice component under iDevice (ie : iPad) it is impossible to Drag any bow.

    Wil it possible to add that feature in a short term horizon ?

    opened by PatDav 2
  • Layout watcher doesn't use `deep`

    Layout watcher doesn't use `deep`

    Hi - We're having problems getting the grid to redraw on changes to the layout prop.

    We've got some code that dynamically sets the height of the grid e.g.

    this.layout[index].position.h = this.howeverManyRowsNeeded(component.$el)
    

    However, the current watcher fails to notice the change as it's not watching the positions keys within the layout array.

    watch: {
      layout (newLayout) {
        if (this.fixLayoutOnLoad) {
          if (utils.layoutHasCollisions(newLayout)) {
            this.updateLayout(utils.fixLayout(newLayout, this.bubbleUp))
          }
        }
      }
    }
    

    To resolve this you'd need to enable deepWatching you could do this by telling the watcher to use deep watching e.g.

    watch: {
      layout: {
        handler(newLayout) {
          if (this.fixLayoutOnLoad) {
            if (utils.layoutHasCollisions(newLayout)) {
              this.updateLayout(utils.fixLayout(newLayout, this.bubbleUp))
            }
          }
        },
        deep: true
      }
    }
    
    opened by OwenMelbz 0
  • Action Button on top grid box need click twice

    Action Button on top grid box need click twice

    I've created dnd-grid container with ability to add, drag and drop, and add some action on top of each dnd-grid-box. like: pop-up info and close action. But somehow, when container have at least 3 box, the button need to click twice to execute the action. Do you have any idea to solve the problem?

    opened by rendy-faqot 0
Releases(v0.0.14)
Owner
null
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 5.9k Sep 29, 2022
A draggable and resizable grid layout, for Vue.js.

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

ibrahem kamal 0 Aug 26, 2020
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 231 Oct 4, 2022
Layoutit grid is a CSS Grid layout generator

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Leniolabs_ 1.3k Oct 4, 2022
vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

| vue-products-grid vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different op

Antonio 4 Feb 14, 2020
Vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

vue-grid-layout vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout Current version: 2.3.9 (Supp

Danny Funkat 0 Feb 22, 2022
Virtual Scrolling Grid made for VueJS based on CSS grids.

Vue Virtual Grid Virtual Scrolling Grid made for VueJS based on CSS grids. NPM Package | Demo Website Render any Vue Component (images, iframes, conte

Corentin Mors 42 Oct 4, 2022
Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use <

Shogo Sensui 43 Jun 30, 2022
: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 935 Sep 28, 2022
Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Yev Vlasenko 935 Sep 28, 2022
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 87 Dec 20, 2021
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 139 Aug 3, 2022
A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

Sergej Sintschilin 13 Oct 3, 2020
Lightweight set of functional grid components

vue-grid-styled Vue.js port of @jxnblk's React library, grid-styled Installation yarn add vue-grid-styled Default Theme // Breakpoints const breakpoin

Matt Rothenberg 17 Aug 23, 2022
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 26 May 30, 2022
🧙‍♂️🔌 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 172 Aug 17, 2022
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 27 Sep 11, 2022
🧮 Generate basic CSS Grid code to make dynamic layouts!

CSS Grid Generator Site: https://cssgrid-generator.netlify.com/ This project is a way for people to use CSS Grid features quickly to create dynamic la

Sarah Drasner 4.3k Sep 25, 2022
Vue Repsonsive Grid Layout

VueResponsiveGridLayout 1.2.0 Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstr

lukerem 82 Jan 18, 2022