How to create igoogle layout(drag & drop & store) using PHP and AJAX?

Question

In igoogle, we can drag & drop the modules and then if we quit the browser and open it again, the position of each module still the same. I have tested couple of things:

1. When not logged in, igoogle store the modules position in my cookies(cache). Because if I clear cache, it goes back to original position.

2. When I logged in, after positioning the modules, even I logout and clear my cache, if I login again, the modules still the same, not back to original position.

What i want to ask:

1. How to store the modules position for logged and not logged in user?

2. Whar are the required skills? (I use php, mysql and jquery)

3. Is there any good tutorials I can reference to?

Answer 1

There is a very good tutorial here: http://nettuts.com/tutorials/javascript-ajax/inettuts/

You will have to store the users data in a mysql table. Maybe set up a "column / row" column in your mysql table with a linked content id. If you do not have any knowledge of relational databases, it would be a good idea to start there. If you do understand the db fundamentals, then it would be a simple update query to store the users info based on a cookie that is set to expire far into the future.

If you allow users to log in (like google), then the use of cookies is not necessary (but can still be useful), as you can use the div position data that is stored in your mysql table.

Answer 2

http://stackoverflow.com/questions/798666/logic-behind-drag-and-drop/802221#802221

1. use http://jqueryui.com/demos/sortable/ to enable a sortable list of divs
2. process the sortable("toArray") to the database
3. load it in order from db to get them in place

Answer 3

check this http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

Answer 4

Could this be done using a frame such as struts 2.