[jQuery] draggable and droppable tabs

[jQuery] draggable and droppable tabs


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





























































    • Topic Participants

    • scott