Jquery UI, "dead area" with sortable portlets

Question

I'm trying to make a portlet based page where the portlets have different sizes.

The problem is to work around the "dead area" to the left of the "2.2 portlet", a “1.1 portlet” or a “2.1 portlet” would fit into the space, but is it possible to accomplice and how ?

The width of the page is fixed and should remain like that, http://www.jsfiddle.net/XF2pV/

I'm open for suggestions on other frameworks if jQuery UI can't accomplice this.

Answer 1

Unfortunately the method is flawed. Using jquery sortable with a grid layout of differing sized items will result in this behaviour. The reason is that in the html and css, you are creating a list of items floated left, which when allowed to wrap in a fixed width container, will leave gaps which are effectively unusable.

The fact that your container width is fixed, and your boxes are fixed size means it would be easy to try another way of positioning them. Try using absolute positioning using just css and html to get all the spaces filled exactly as you initially want them, then experiment with the javascript to move the boxes around.

However, I doubt that the 'sortable' jQuery library would work when using absolute positioning (I must admit I've never used it) With absolute positioning, it is likely that getting items to 'move out of the way' when you drag something over them will be problematic. You may need to define on set of hidden divs which act as your 'grid' - or places you can drop stuff, and another set of divs which contain the visible stuff you want to move around. The jQuery draggable and dropable api will help, but you will need to do a lot more coding to ensure the items you move 'snap' into position, moving others out of the way when you drop them.

This looks related https://stackoverflow.com/questions/2133677/jquery-sortable-divs-replicate-bbc-home-page maybe you could check the source code of the BBC homepage. http://bbc.co.uk