How to use draggable sections like on iGoogle?

Question

When viewing iGoogle, each section is able to be drag-and-dropped to anywhere else on the page and then the state of the page is saved. I am curious on how this is done as I would like to provide this functionality as part of a proof of concept?

UPDATE

How do you make it so that the layout you changed to is saved for the next load? I am going to guess this is some sort of cookie?

Answer 1

One method not mentioned here is that starting with ASP.NET in the 2.0 framework, Microsoft unveiled something called WebParts which enabled the building of controls which could be dragged and placed in the same way. This was supposed to be an easy method for users to create their own Web 2.0 style portals.

Answer 2

NETTUTS has a tutorial on putting one of these together with jQuery.

Answer 3

Any up-to-date client side framework will give that kind of functionality.

• jQuery
• YUI
• GWT
• Prototype

Just to name a few...

Regarding the "saving" (persistency, if you will) of the data, this depends on the back-end of your site, but this is usually done via an asynchronous call to the server which saves the state to a DB (usually).

Answer 4

It's amazingly simple with jQuery. Check out this blog entry on the subject.

Edit: I missed the "state of the page is saved" portion of the question when I answered. That portion will vary wildly based on how you structure your application. You need to store the state of the page somehow, and that will be user dependent. If you don't mind forcing the user to restore their preferences every time they clear their cookie cache, you could store state using a cookie.

I don't know how your application is structured so I can't make any further suggestions, but storing a cookie in jQuery is also amazingly simple. The first part of this blog entry tells you almost everything you need to know.

Answer 5

I hate to give a short answer on this, but there are several dozen different JavaScript libraries that provide this type of functionality, and lots of tutorials and howto guides available on google:

http://www.google.com/search?q=javascript+draggable

Some JavaScript libraries/frameworks you might want to take a look at:

• jQuery
• MooTools
• Yahoo User Interface (YUI) library