Gridster.js

Gridster is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

More at http://gridster.net/.

Live Preview at: http://dsmorse.github.io/gridster.js/

Releases

CHANGELOG

Gridster was created by Ducksboard but they have basiclly abondoned the project and even those who had write permissions to the repo are not merging pull requests.

Forks

As of result of the inactivity over the last year in the Ducksboard repository, @dsmorse has created a fork for current support. He will GLADLY accept pull requests, and will be working to merge existing Pull Requests from Ducksboard repo.

Install with NPM

This fork of Gridster can be installed via NPM;

npm install dsmorse-gridster

or to save.

npm install dsmorse-gridster --save

Ruby on Rails integration

This artifact is published to rubygems.org to be consumed by ruby on rails applications.

Include gridster.js-rails in Gemfile;

gem 'gridster.js-rails'

and run bundle install.

Configuration

Add this line to app/assets/stylesheets/application.css

 *= require jquery.gridster

Add this line to app/assets/javascripts/application.js

//= require jquery.gridster

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

• Bug reports
• Feature requests
• Pull requests

License

Distributed under the MIT license.

Whodunit

Gridster is built by Ducksboard with the help of all these wonderful people.

v0.8.0 (2018-07-24)

Bug Fixes

• $browser:
  • move_widget_down -movedown now checks for height as well to know if a widget can (e466551d)
  • make fn.move_widget_down return a success bool, to prevent towers of widgets dro (a79d3400)
  • fn.on_start_drag -fix a bug where this.set_dom_grid_height doesn't have a max he (fd950e8a)
• $compile: semicolons, again -semicolon (9be8f3cc)

Features

• $browser:
  • add_widget failure -if a new widget doesn't fit, don't add it to the list and re (9d580598)
  • get_offset -changed options.limit to options.limit.width and height -use limit: (dbe50005)

v0.7.0 (2016-02-26)

Bug Fixes

• Apply fix from #22 to vertical positioning (dfc64916)
• convert from JQury to DOM (4936ef82)
• fn.generate_stylesheet: only return new stylesheet if colWidth and this.$wrapper.width() are > 0 (f513793a)
• gridster: Add additiona error checking on widgets removal (2b0f9963)

v0.6.10 (2015-05-31)

• Add Ruby on Rails support

v0.6.9 (2015-05-27)

• bug fixes for positions and overlap
• dist modified to support webpack deployements
• new 'sticky' layout option which allows widgets to be places absolutely into a position on the grid.

v0.6.8 (2015-04-28)

Bug Fixes

• gridster:
  • responsive width now resizes based off wrapper not window (e69c3e8f)
  • ensure coords instances are destroyed on widgets (576b5ae3)
  • resize_widget also accepts HTMLElements (cda560f4)
  • changed "instanceof jQuery" to "instanceof $" (c6226306)
  • wrong addition solved in add_faux_rows/cols by adding parseInt (d9471752, closes #426, #425)
  • preventing gridster from adding extra resize handles (9d077da6)
  • destroy resize_api (b1629326, closes #473)
  • ensure widget dimensions and coords are always ints (595a94f1)

Features

• draggable: autoscrolling (d3f25f3f)
• gridster:
  • add config to set custom show/hide widget methods (7de5bbab)
  • browserify compatibility (43148b87)
  • Common.js support (446852a2, closes #434)
• gridster.css: remove possible default pading (2002c455)

v0.6.7 (2015-04-16)

v0.6.6 (2015-04-08)

v0.6.5 (2015-04-06)

Bug Fixes

• gridster: fixed bugs in centering_widgets (widgets were getting smushed when being resized (86053f8b)

v0.6.4 (2015-03-19)

Bug Fixes

• gridster:
  • added ability to center widgets in grid

v0.6.3 (2015-03-06)

Bug Fixes

• gridster:
  • fixing resize limits when in fixed width mode feature(gridster): added fix_to_co (6bb47dc1)

v0.6.2 (2015-02-23)

Bug Fixes

• gridster: forcing height of gridster container to auto when in collapsed mode (749f37a5)

v0.6.1 (2015-02-21)

Bug Fixes

• gridster:
  • fixed expand_widget bug not expanding full width of window fix(gridster): user c (dbc226d4)
  • fixing drag limit issues when using autogrow_cols (afd83fea)
  • changed the way widgets were getting positioned so that margins are actually the (a3913043)

v0.6.0 (2015-02-18)

Bug Fixes

• gridster: changed the way widgets were getting positioned so that margins are actually the (a3913043)

Features

• gridster: make grid responsive (a3913043)

v0.5.7 (2015-02-17)

v0.5.6 (2014-09-25)

Bug Fixes

• draggable: namespace events with unique ids (79aff38c)

v0.5.5 (2014-07-25)

Bug Fixes

• gridster: fire positionschanged when widget orig position changes (9926ceff)

v0.5.4 (2014-07-16)

Bug Fixes

• gridster: serialize returns an Array object, not a jQuery object (93df6cf6, closes #394)

v0.5.3 (2014-07-04)

Bug Fixes

• gridster:
  • custom ignore_dragging overwrites the default value (6bcfa6e1)
  • sort widgets appropriately when reading them from DOM (5c6d25cb)

Features

• make gridster AMD compatible (589d7fd5)
• gridster: move widget up when added if there is space available (8ec307b6)

v0.5.2 (2014-06-16)

Bug Fixes

• draggable:
  • handle both touch and click events (021a6c23, closes #207, #236, #329, #380)
  • replaced scrollX/Y with scrollLeft/Top (bb7463a3)
  • fix offset during drag (c726c4ad)
  • bind drag events to $document (dd6c7420)
• gridster:
  • fix add_widget to use correct size_y when adding rows (7d22e6c8)
  • Removing previously added style tags before adding new one. (93c46ff4)

Features

• draggable:
  • allow ignore_dragging config option to be a function (69fcfe45)
  • option to not remove helper on drag stop (03910df9)

v0.5.1 (2014-03-05)

Features

• collision: overlapping region as a config option (720d487e)
• coords:
  • allow both (left/x1) and (top/y1) attr keys (6f22217f)
  • add destroy method (fdeee4f6)
• draggable: keep container position prop if different than static (04868a38)
• gridster: destroy element's data and optionally remove from DOM (dc09f191)

v0.5.0 (2014-02-14)

Bug Fixes

• autogrow: refining autogrow_cols behavior and grid width issues (835c2df8)
• resize.stop: Call resize.stop at the latest possible moment (e21f63a0)

Features

• draggable: Add toggle draggable method. (073fdc40)

v0.4.4 (2014-02-13)

Features

• resize: add start/stop/resize event triggers (7ca8deec)

v0.4.3 (2014-02-11)

Bug Fixes

• generated-styles: cleaning cached serializations properly (f8b04f29)

v0.4.2 (2014-02-07)

Bug Fixes

• recalculate grid width when adding widgets (47745978)

v0.4.1 (2014-02-07)

Bug Fixes

• add resize.min_size option to default config object (5672edb0)

v0.4.0 (2014-02-07)

Bug Fixes

• gridster:
  • leaking options with multiple Gridster instances (07c71097)
  • resize.axes default option only 'both' (62988780)
• licenses: add required copyright message for underscore (b563c094)
• readme: link title jsfiddle -> jsbin, edit 5) of process steps (0641aa89)

Features

• draggable:
  • method to set drag limits dynamically (d4482ec1)
  • support horizontal scrolling while dragging (ae4921b7)
• gridster: increase grid width when dragging or resizing (37c4e943)
• resize: add option to set min_size of a widget (ff511872)

v0.3.0 (2013-11-18)

Features

• draggable:
  • method to set drag limits dynamically (d4482ec1)
  • support horizontal scrolling while dragging (ae4921b7)
• gridster: increase grid width when dragging or resizing (b61df653)

v0.2.1 (2013-10-28)

Features

• resize: Add start/stop/resize callbacks (d4ec7140)

v0.2.0 (2013-10-26)

Bug Fixes

• fixes and improvements in widget-resizing. (ae02b32b, closes #32)
• gridster:
  • the preview holder should not always use li (1ade74e2)
  • overlapping widget problem (31fd8d6b)
  • Orphan preview holder when dragging is interrupted (1b13617d)
  • remove_widget Returns the instance of the Gridster Class (5bfbc5c0)

Features

• draggable:
  • new config option to move or not the dragged element (4d9b2a84)
  • CSS selectors support in ignore_dragging config opt (0f956249)
  • pass previous position to the drag callback (055cc0e4)
  • Don't start new drag if previous one hasn't stopped (91ca6572)
  • pass useful data to all drag callbacks (8dda2410)
• gridster: drag-and-drop widget resizing (e1924053)
• utils: add delay helper to utils (faa6c5db)

dustmoo Modifications

Changelog 2013-04-3

Fork now handles standard behavior properly with swap allowing larger widgets to shift down.

Changelog 2013-04-2

Added Demo to Repository.

Changelog 2013-02-27

Added "Static widget support" Static Items default to the "static" class.

You can customize this class by using the code below:

$.gridster({
    static_class: 'custom_class',
    draggable: {
        items: ".gs_w:not(.custom_class)"
    }
});

I have also added functions creating a much more thourough check of whether the player can occupy the space you are moving it too. This version is much more reliable in swapping space with widgets.

There are also new options for Maximum Rows and Maximum Columns:

$.gridster({
    max_rows: map_rows,
    max_cols: map_cols,
    shift_larger_widgets_down: false
});

Setting the maximum amount of rows only completely works if you disable shifting larger widgets down at the moment.

Changelog 11-26-2012

Reworked swapping functionality to better handle large to small widget handling.

Widgets of smaller or equal size to the dragged widget (player) will swap places with the original widget.

This causes tiles to swap left and right as well as up and down.

By default smaller players will shift larger widgets down.

I have added an option to prevent this behavior:

$.gridster({
    shift_larger_widgets_down: false
});

By setting shift_larger_widgets_down to false, smaller widgets will not displace larger ones.