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

and

I see that this functionality is easily acplished if we have a fluid layout. However. I want a dashboard which is slightly more plex 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 acplish 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 acplished I hope to share my dashboard on github. Thank you.

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

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

and

http://jqueryui./sortable/#portlets

I see that this functionality is easily acplished if we have a fluid layout. However. I want a dashboard which is slightly more plex 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 acplish 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 acplished I hope to share my dashboard on github. Thank you.

• javascript
• jquery
• html
• drag-and-drop

• 1 Are you looking for a jQuery plugin you can use to do this. Or write one yourself from scratch. Or let someone here write one for your which you then post on GitHub? :) – El Ronnoco Commented Dec 7, 2012 at 11:25
• I'm looking for a Jquery plugin which can assist with this if possible (if it meets my requirements). I'll probably ultimately end up writing my own but I'm looking for a good algorithm or reference implementation to approach this. – Elixir Commented Dec 7, 2012 at 11:30
• The two links that you provided are a very good start point, you can read the code understand it and then customize it depending on your needs. – Mehdi Karamosly Commented Dec 12, 2012 at 16:24
• It sounds like there are a couple of UX issues to answer first. How would tiles be resized? By dragging edges? Say on your 10 x 10 grid, I've got 100 tiles (each 1x1). What happens if I resize the top left hand tile to 2x1? Should the tile to the right of it be deleted/removed/push others across? I'd try to think through EVERY UX possibility first and ensure that what you're picturing would be usable. Sorry for the non-answer... from an implementation point of view, you're probably then looking at munging jQuery UI's Sortable and Resizable with some custom logic to handle the UX of resizing. – Stu Cox Commented Dec 12, 2012 at 18:46
• 3 Looks like the Droptiles project could give you a nice starting point. The tiles are not resizable but they may have different sizes. – izilotti Commented Dec 12, 2012 at 22:09

1 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 plete.