How to create draggable widgets?

Question

Background

I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics: - Dashboard is comprised of draggable widgets arranged in a grid layout - Widgets have a drag handle which can be clicked by the user to start dragging - Widgets can be re-ordered by dragging and dropping the widget

Question

Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.

Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)

Answer 1

EDIT This one looks even better and more maintained! GRID by UberVU

Next one on the list is gridster.js

PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.

Answer 2

You can easily implement this. You will get required info from

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

and

http://james.padolsey.com/javascript/inettuts-with-cookies/