JQuery toolbar with grid layout

Question

I want to create a jQuery based toolbar. Take a look at the following examples:

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

and

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

I see that this functionality is easy to execute if we have a fluid layout. But. I need a panel that is a bit more complicated than the examples mentioned above.

The control panel I'm looking for to create will have a grid on which items can be dropped. Elements can be deleted anywhere on the page, and separation will be allowed between elements. Elements can be changed relative to the grid, which causes the elements to move to the side.

I don’t need a layout, for example, the toolbar of the google main page, where the tiles move up and do not allow placing them between the grid.

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

The tile can be 1 x 1 and changed to 1 x 2, and then there can be a 1 x 1 spacer, and then another tile.

I am looking for a good algorithm for this. My ultimate goal is to end up with a toolbar similar to the ones you see on your Android home screens.

However, my main drawback is currently intelligent collision detection for sharing and meshing.

Once I'm done, I hope to share my panel on github. Thanks.

Answer 1

This is not a jQuery plugin, but Gridster does everything you mentioned, EXCEPT for resizing.

Please let us know if you find something more complete.