jQuery Forum

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();
                }
        });

}


HTML code:

<div id="container">
   <div id="left">
      <div id="left_left" class="tabs">
         <div id="tabA1" class="tabContent">
            <h2>Area 1 - TAB #1</h2>
            <div class="tabInnerContent"> TAB A-ONE </div>
         </div>
         <div id="tabA2" class="tabContent">
            <h2>Area 1 - TAB #2</h2>
            <div class="tabInnerContent"> TAB A-TWO </div>
         </div>
         <ul id="left_left_tabs" class="tabsList">
            <li class="draggableItem"><a href="#tabA1">Tab a-1</a></li>
            <li class="draggableItem"><a href="#tabA2">Tab a-2</a></li>
         </ul>
      </div>
      <div id="left_right" class="tabs">
         <div id="tabB1" class="tabContent">
            <h2>Area 2 - TAB #1</h2>
            <div class="tabInnerContent"> TAB B-ONE </div>
         </div>
         <div id="tabB2" class="tabContent">
            <h2>Area 2 - TAB #2</h2>
            <div class="tabInnerContent"> TAB B-TWO </div>
         </div>
         <ul id="left_right_tabs" class="tabsList">
            <li class="draggableItem"><a href="#tabB1">Tab b-1</a></li>
            <li class="draggableItem"><a href="#tabB2">Tab b-2</a></li>
         </ul>
      </div>
   </div>
</div>


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

Scott Nath