Question

I know I should spend more time researching this and having a go before asking the question but I’ve got just 2 weeks to build a site with a portal style homepage (much like http://www.bbc.co.uk).

I’m fairly good with jQuery and have played with jQuery UI draggables in the past but I was wondering if there were any tutorials or best practice examples of how to build a portal with multiple drop zones and the ability to remember which ‘portlets’ have been dragged into which dropzones in some kind of state object.

I would need to be able to save the state object to the back-end using a $ajax() call and somehow reorganise the portlets when the user logs back in to the site, presumably by sending a JSON state object from the back-end.

Just some ideas of where to start would be useful. Thanks

Answer 1

I’ve been thinking about something similar recently. The best method I could come up with was to have several ‘zones’ on the page where items would be placed. In my case these were 3 columns. I gave each an identifier and used an Ajax call every time a block was moved to a different position to update the new position of that block.

For example, a sample database table:

tbl.blocks:   userid | blockid | column | placement      1   |    2    |   1    |     3 

Where column is a simple column identifier and placement is the placement within that column. I used a query at page load that loaded the blocks in order of placement, and then wrote them in. blockid refers to a table of blocks.

Here’s a tutorial I found that looks relevant: http://aymanh.com/drag-drop-portal-interface-with-scriptaculous