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