Jquery Dashboard with Grid Layout

Question

I'm looking to build a Jquery based dashboard. Looking at the following examples:

http://jqueryui.com/sortable/#display-grid

and

http://jqueryui.com/sortable/#portlets

I see that this functionality is easily accomplished if we have a fluid layout. However. I want a dashboard which is slightly more complex than the examples mentioned above.

The dashboard I'm looking to create will have a grid where items can be dropped onto. The items can be dropped anywhere on the page, and spacing will be allowed to exist between items. The items can be resizable against the grid causing items to move out of the way.

I do not want a layout like the google homepage dashboard where tiles shift up and do not allow spacing between them in the grid.

So for example I would have a 10 x 10 grid (50 pixels per unit)

A tile can be 1 x 1 and resized to 1 x 2 and then there can be a 1 x 1 spacer and then another tile.

I'm looking for a good algorithm to accomplish this. My ultimate goal is to end up with a dashboard similar to the ones you would see on your android home screens.

However, my major drawback is currently smart collision detection for swapping and organising the grid.

Once accomplished I hope to share my dashboard on github. Thank you.

Answer 1

It's not a jQuery plugin, but Gridster does everything you mentioned EXCEPT for the resizing.

Please let us know if you find something more complete.