How to create stateful portal page in jquery user interface?

Question

I know that I should spend more time researching this and skipping before asking a question, but I only have 2 weeks to create a website with a portal home page (just like http://www.bbc.co.uk )

I am pretty good at jQuery and played with jQuery UI draggables in the past, but I was wondering if there were any lessons or best practices for creating a portal with multiple drag zones and the ability to remember which "portlets" were wrapped in quotes in which state facility.

I would need to save the state object in the background content by calling $ ajax () and somehow reorganize the portlets when the user logs back into the site, presumably by sending a JSON state object from the Back-End.

Only a few ideas on where to start would be helpful. Thanks

Answer 1

- . , , , "", . 3 . Ajax , , .

, :

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

, . , , . blockid .

, : http://aymanh.com/drag-drop-portal-interface-with-scriptaculous

Answer 2

, , - , javascript, . , , , . javascript, .

, AJAX . , , - , , "", . . AJAX, Javascript drag-n-drop .

Answer 3

- http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/. - http://docs.jquery.com/UI/Sortable. , - :

<div id='#left_sidebar'>
  <div id='box1'>somestuff</div>
  <div id='box2'>otherstuff</div>
</div>

$(#left_sidebar).sortable({
  update: function() {
     alert($("#left_sidebar").sortable("toArray"));
  }
});

'serialize' 'toArray'. ( ) jquery/ajax - - :

$.post(
  "backend_script.php", 
  $("#left_sidebar").sortable("toArray"), 
  onready_function()
);

- , , ( ).

Answer 4

jQuery.portal: .

Answer 5

, HTML div, . .

 <ul id="col1">
    <li><div id="portlet1">...content...</div></li>
    <li><div id="portlet2">...content...</div></li>
</ul>
<ul id="col2">
    <li><div id="portlet3">...content...</div></li>
    <li><div id="portlet4">...content...</div></li>
</ul>
<ul id="col3">
    <li><div id="portlet5">...content...</div></li>
    <li><div id="portlet6">...content...</div></li>
</ul>

JQuery sortable() API li placeholder, , . onDrop() API . :

portlet1 -- 1,1 (row,column)
portlet2 -- 2,1 
portlet3 -- 1,2 
portlet4 -- 2,2 
portlet3 -- 1,3 
portlet3 -- 2,3 

DOM. ( HTML5 localStorage). w.r.t .

, . http://network.nature.com/workbench ( , )