[jQuery] draggable and droppable tabs

[scottnath]

I am trying to create draggable/droppable tabs. I've got it partly
built, but I'd love some community input on this.

A working model can be seen here:

http://scottnath.com/tabs/draggable_tabs.html

Below I will paste the jquery code I'm using. First, here are some
issues I'm running into that I really need some help with:

1) tabs can only be moved once
2) moving tabs from left-to-right works, but not vice/versa
3) I'm having trouble figuring out the dragged tabs original index



jQuery code:

$(document).ready(function(){
       bindBehavior();
});
function bindBehavior(){
       $("#left_left > ul").tabs();
       $("#left_right > ul").tabs();
       $(".draggableItem").Draggable({
               revert:         true
       });
       $(".tabsList").Droppable({
               accept: "draggableItem",
               ondrop: function (drag){
                       var thisId = $(this).attr("id");
                       // gets the id of the container that the
draggable's tab content should end up in
                       var thisParent = $(this).parent().attr("id");
                       // gets the moved tab id by using the href
                       var dragAHref = $
(drag).children("a").attr("href");
                       // remove the leading # sign
                       var dragTabId = dragAHref.substring(1);
                       // gets the clickable-tab content
                       var dragAContent = $
(drag).children("a").text();
                       // gets the id of the container that the
draggable's tab content resides in
                       var dragParent = $
("#"+dragTabId).parent().attr("id");
                       // if it didn't move to a new spot, do nothing
                       if(dragParent == thisParent){
                               return;
                       }
                       // finds the htmlobject that is the dragged
LI's corresponding tab
                       var dragTab = $("#"+dragTabId).get(0);
                       // gets tab LI index
                       var dragIndex = $
("li.draggableItem").index(drag);
                       // next: put content of tab into newly created
tab
                       var movedTabContent = $("#"+dragTabId).html();
                       // for some reason, the index seems to come out
one too many
                       dragIndex--;
                       // remove the tab from where it came from
                       $("#"+dragParent+ " ul").tabsRemove(dragIndex);
                       // add this tab to where it was dragged
                       $("#"+thisId).tabsAdd('#'+dragTabId,
dragAContent);
                       // need to add this class
                       $("#"+dragTabId).addClass('tabContent');
                       // populate the tab-div
                       $("#"+dragTabId).html(movedTabContent);

                       bindBehavior();
               }
       });
}



Thank you to anyone who can help. I really appreciate it.

Scott Nath

ps: sorry if this is a repost, but my original is not longer found
when I search for it.