Move jQuery-UI tabs to another set

I'm having 2 sets (set1,set2) of tabs (all created using the add method). I also have both sets to sortable and using the c开发者_如何学运维onnected-list option of sortable, I've made it possible to move tabs from set1 to set2 and vice versa.

But this doesn't move the div containing the content of the tab. So, I wrote the following function to move the div also (called when the over event of sortable is triggered

    migrateTabDiv:function(e,ui){
        console.log( ui.item.find("a").attr("href") );
        console.log( $(this).parent() );
        var relatedContentDiv=$( ui.item.find("a").attr("href") );

        console.log(relatedContentDiv);
        $(this).parent().append( relatedContentDiv[0] );
    }

This code moves the Div to the correct set but now when I try to make a tab active,I get the following error

Uncaught jQuery UI Tabs: Mismatching fragment identifier.

What I understand from this is that the UI tabs use some kind of internal representation too which relates a tab content to a set.

The basic functionality that I'm trying to achieve is to be able to drag a tab from one set of tabs into another set of tabs. How can I make this possible?

I've hacked together a work around. It is not the most efficient method but it works

migrateTabDiv:function(e,ui){

    var oldIndex=ui.item.data('originIndex');
    var label=ui.item.find("a").text();
    var id=ui.item.find("a").attr("href");
    var currentIndex = ui.item.index()+1;


    var jRelatedTabContentDiv=$( id ).find(".tabContent").detach(); //detach and keep the old content

    ui.sender.parent().find( id ).remove(); // remove the old div 
    ui.item.remove(); // remove the tab li that is appended by the sortable in the new set


    $(this).parent().sortable( "refresh" ).tabs("add", id , label, currentIndex);  //add a similar tab
    $(this).parent().find( id ).append( jRelatedTabContentDiv );  //add teh old content
}

And the tabs initialisation goes as

$("#fileTabsMain").tabs().find( ".ui-tabs-nav" ).sortable({
         connectWith: "#fileTabsVSplit .ui-tabs-nav",
         placeholder: "ui-state-highlight",
         forcePlaceholderSize:true,
         receive:interfaceView.migrateTabDiv,
         start: function(event, ui) {
                    ui.item.data('originIndex', ui.item.index());
                 },
         });

And a similar initialization for #fileTabsVSplit also.