https://github.com/alajmo/dashgrid

:honeybee: A pure javascript high performance grid
https://github.com/alajmo/dashgrid

Last synced: about 2 months ago
JSON representation

:honeybee: A pure javascript high performance grid

• Host: GitHub
• URL: https://github.com/alajmo/dashgrid
• Owner: alajmo
• License: other
• Created: 2015-10-15T20:55:06.000Z (about 9 years ago)
• Default Branch: main
• Last Pushed: 2023-03-05T15:14:12.000Z (almost 2 years ago)
• Last Synced: 2024-08-08T16:31:43.142Z (5 months ago)
• Language: JavaScript
• Homepage: http://alajmo.github.io/dashgrid/
• Size: 2.45 MB
• Stars: 16
• Watchers: 2
• Forks: 2
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Awesome Lists containing this project

README

        
# Dashgrid

A highly customizable drag-and-drop grid built on pure es6 with no

external dependencies. Inspired by gridster and angular-gridster and other excellent grid

systems.

Don't use in production just yet! Check out [demo](http://alajmo.github.io/dashgrid) in the meantime!

## Motivation

As far as I know there isn't a grid system that is dependency free, maintained actively,

and customizable to the core.

# Installation

Either via npm:

```shell

npm install dashgrid

```

or download the dist/dashgrid.js (dashgrid.min.js).

## Quick Start

Include the dashgrid.js file either via html, commonjs or es6 syntax.

```javascript

// Wrapped in DOMContentLoaded to make sure DOM is loaded before Grid.

document.addEventListener('DOMContentLoaded', function() {

    var boxes = [

        {'row': 1, 'column': 1, 'rowspan': 1, 'columnspan': 1}

    ];

    var options = {

        boxes: boxes,

        floating: true

    };

    var element = document.getElementById('grid');

    var grid = Grid(element, options);

});

```

# API

## Methods

* updateBox

* insertBox

* removeBox

* refreshGrid

## Events

* dragStart

* dragging

* dragEnd

* resizeStart

* resizing

* resizeEnd

## Properties

## Default Configuration

```javascript

var gridOptions = {

    rowHeight: 'auto',

    numRows: 6,

    minRows: 6,

    maxRows: 10,

    columnWidth: 'auto',

    numColumns: 6,

    minColumns: 6,

    maxColumns: 10,

    xMargin: 20,

    yMargin: 20,

    defaultBoxRowspan: 2,

    defaultBoxColumnspan: 1,

    minRowspan: 1,

    maxRowspan: 9999,

    minColumnspan: 1,

    maxColumnspan: 9999,

    liveChanges: true,

    draggable: {

            enabled: true,

            handles: 'auto',

            dragStart: function () {},

            dragging: function () {},

            dragEnd: function () {}

    },

    resizable: {

        enabled: true,

        handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],

        handleWidth: 10,

        resizeStart: function () {},

        resizing: function () {},

        resizeEnd: function () {}

    },

    scrollSensitivity: 20,

    scrollSpeed: 10,

    snapbacktime: 300,

    displayGrid: true

};

```

# Miscellaneous

## Grid Width and Height

If rowHeight / columnWidth is set to 'auto', then the grid

height / width is set to that of the parent element.

rowHeight then becomes gridHeight / numRows + yMargins and

columnWidth gridWidth / numColumns + xMargins.

If rowHeight / columnWidth is set to a number, then the grid

height is set to:

    gridHeight = numRows * rowHeight

and the grid width is set to:

    gridWidth = numColumns * columnWidth

## Styling

If you want another design on the box, drag handlers, resize handlers, the placeholder

box (the shadow box shown when dragging / resizing a box) you can edit these to your liking.

The only css done in Dashgrid is the necessary positioning.

The DOM structure of dashgrid is:

```

    


        

        


            


                


                


                


                


                


                


                


                


                


            

        


        

        


        

        


        

        


    

```


The way z-index works in this case is:

* dashgrid: 1000

* dashgrid-box: 1003

* moving dashgrid-box: 1004

* dashgrid-shadow-box: 1002

* dashgrid-box-resize-handle: 1003

* dashgrid-grid-lines: 1001

* dashgrid-grid-centroids: 1001

# Inspiration

* gridlist

* Packery

* angular gridster

* gridster