This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages. Made by Ducksboard.
It's so sweet we like to call it drag-and-drool.
Gridster is currently written as a jQuery plugin, so you need to include it in the head of the document. Download the latest release at jQuery.
Class names and tags are customizable, gridster only cares about data attributes. Use a structure like this:
Gridster accepts one argument, a hash of with configuration options. See the documentation for details.
To get hold of the API object, use the jQuery data method like so:
Creates a JavaScript array of objects with positions of all widgets, ready to be encoded as a JSON string.
These are the most commonly used methods. If you want more details, check out the documentation generated from source.
A gridster configuration object.
Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements.
Horizontal and vertical margins respectively for widgets.
Base widget dimensions in pixels. The first index is the width, the second is the height.
Add more rows to the grid in addition to those that have been calculated.
Add more rows to the grid in addition to those that have been calculated.
The minimum number columns to create.
The minimum number of rows to create.
The maximum number of columns that a widget can span.
The maximum number of rows that a widget can span.
If true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and injected to the <head> of the document. You can set this to false and write your own CSS targeting rows and cols via data-attributes like so: [data-col="1"] { left: 10px; }.
Don't allow widgets loaded from the DOM to overlap. This is helpful if you're loading widget positions form the database and they might be inconsistent.
A function to return serialized data for each each widget, used when calling the serialize method. Two arguments are passed: $w: the jQuery wrapped HTMLElement, and wgd: the grid coords object with keys col, row, size_x and size_y.
A callback for when dragging starts.
A callback for when the mouse is moved during the dragging.
A callback for when dragging stops.
A callback for the first time when a widget enters a new grid cell.
A callback for each time a widget moves inside a grid cell.
A callback for the first time when a widget leaves its old grid cell.
Create a new widget with the given html and add it to the grid.
Returns the jQuery wrapped HTMLElement representing the widget that's been created.
Change the size of a widget.
Returns the jQuery wrapped HTMLElement representing the widget that's been resized.
Remove a widget from the grid.
Returns the instance of the Gridster class.
Creates an array of objects representing the current position of all widgets in the grid.
Returns an Array of Objects (ready to be encoded as a JSON string) with the data specified by the serialize_params option.
Creates an array of objects representing the current position of the widgets who have changed position.
Returns an Array of Objects (ready to be encoded as a JSON string) with the data specified in the serialize_params option.
Enables dragging.
Returns the instance of the Gridster class.
Disables dragging.
Returns the instance of the Gridster class.
Remember that gridster depends on jQuery. Download the latest release at jQuery.
Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.
