Razvan Pandor

Drag&drop Tabs

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.

• JQuery main documentation page
• An online tutorial on JQuery, by Jorn Zaefferer
• The tabs demo on the JQuery page.
• Draggable&Droppable elements demo on the JQuery page.
• A fantastic colection of interface components based on JQuery. (demos)

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 JQuery UI components used are:

• Tabs
• Draggables
• Droppables

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

A recent US study reveals that single moms are a employers favourite choice because they are a lot more motivated than usual people. Since i don’t recall the exact source of this you’ll have to trust my words… checked a bit around but i could only find dating/advice-Oprah like sites.

So all you guys out there looking for a good job and can’t get one…. begin working on becoming a single mom!
cheers.