Drag&drop Tabs
Requests:
A dynamic user interface using the jQuery javascript library that allows an user to drag and drop a tab from one tab component to another.
Resources and online documentation used:
Time Management :
The order of events over the past days :
- Friday, May 30: 3 hours of reading/resource searching on JQuery.
- Saturday, May 31: 3-4 hours of tutorials and examples, experiencing with the JQuery UI.
- Sunday, June 1: 2 hours - putting together the interface.
The Interface :
The JQuery UI components used are:
The order of events managed:
- Create the two tab sets using JQuery’s tabs component.
- Make the tabs draggable with JQuery’s draggable component.
- Make the heads of the tab sets a “droppable” area so that it can recieve a new dragged element.
- On the “drop” event : Get the corespondent content of a dragged tab, remove drgged tab from the source tab set, add new tab into the destination tab set with a coresponding content identical to the one it came from
I used the “flora” theme found in the resources available in the JQuery documentation.
View the interface!
Main issues:
-didn’t figure out why the movement from the right set to the left one doesn’t work propperly
-didn’t manage to make the 2 containing divs display “on the same line” in IE6.. tried with a wrapper div but still not working
