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)

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)

• javascript
• jquery

7 Answers 7

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.

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/

Use HTML 5 http://html5doctor.com/native-drag-and-drop/

You can find a lot of info here: http://jqueryui.com/demos/draggable/

1. Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
   • http://jqueryui.com/demos/draggable/
   • http://jqueryui.com/demos/droppable/
2. If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
   • http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1

First what comes to head is jQuery UI.

I am pretty sure this one is going to make you happy!

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