How To Use Draggable Sections Like On IGoogle?

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

Solution 1:

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).

Solution 2:

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

Solution 3:

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

Solution 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.

Solution 5:

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.