Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Nowadays griddable.js depends on jQuery, so you need to include it in the head of your document.
Download the latest release at jQuery.
The HTML required to make gridster works. Class names and tags are customizable but is needed to follow the structure below:
Gridster only accepts one argument with configuration options. Take a look at the documentation.
The API can be accesed as in most jQuery plugins via the jQuery data method like so:
Creates a JavaScript array of objects, ready to be encoded as a JSON string.
The methods listed here are the most common. If this is never enough take a look to the documentation generated from source.
gridder configuration object.
Define who are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElement
Horizontal and vertical margins respectively for widgets.
Base widget dimensions in pixels. The first index for the width and the second for the height.
Add more rows in addition to those that have been calculated.
Add more rows in addition to those that have been calculated.
The minimum required columns.
The minimum required rows.
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; }
Avoid that widgets loaded from the DOM can be overlapped. It is helpful if the positions were bad stored in the database or if there was any conflict.
Return the data you want for each widget in the serialize method. Two arguments are passed: `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid coords object (`col`, `row`, `size_x`, `size_y`).
Executes a function when dragging starts.
Executes a function when the mouse is moved during the dragging.
Executes a function when dragging stops.
Executes a function first time a widget overlaps with a "faux" grid cell.
Executes a function each time a widget overlaps with a "faux" grid cell.
Executes a function last time a widget overlaps with a "faux" 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 was just created.
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 in 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.
Reminds that gridster.js depends on jQuery. Download the latest release at jQuery.
Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.