Let us design the page using “Divide and Conquer” Approach. The tasks involved are
Defining the webpage layout using HTML
Style the webpage and Widgets(Sample iGoogle Mock up Widgets) using CSS
Add the drag and drop functionality using jQuery
Task 1: Defining the webpage layout using HTML
The HTML is very straight forward. Entire webpage contents have been placed inside a div with the id “iGoogle”. Then each column (iGoogle uses three column layout) is defined by a div element with the id representing the corresponding columns. These columns act as a placeholder for Widgets. Each widget defined as a div element which contains two div elements inside it which represents the header and the body of the Widgets
Task 2: Style the webpage and widgets
Now we have the HTML Layout ready. Our next task would be applying style to the webpage and the widgets using CSS.
Task 3: Add the drag and drop functionality using jQuery
Now we have the necessary jQuery libraries to implement the drag and drop functionality and all set for implementing the drag and drop support. Here is the code part which implements the drag and drop functionality.
Yes!! That’s it!! Just three function calls and seven lines of coding!! Now you can drag and drop the widgets and play!!
Well, let me explain the jQuery code
The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Here in our case the selected elements refer to “column1, column2, colum3” which are the placeholders of the widgets. This sortable plugin has many optional arguments which define how drag and drop should be done.
“connectWith” option allows drag and drop between the columns. i.e., Elements (Widgets in our case) inside the column1 or column2 or column3 can be dragged and dropped on column1 or column2 or column3.
“handle” option specifies the element which can be used to drag the widget between the columns. “opacity” option defines the transparency of the widget while dragging. The “disableSelection()” function disable text selection in a widget which often occur while dragging a mouse across a widget. Reference: http://docs.jquery.com/UI/Sortable
To keep the blog post simple, I didn’t implement the persistence of the widget positions. So widgets should not retain its positions when you refresh the page. You can see the source code of this blog post here