[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