将 jQuery-UI 选项卡移动到另一组

Question

我有 2 组 (set1,set2) 选项卡（全部使用 add 方法创建）。我也有两个可排序的集合，并使用可排序的连接列表选项，我可以将选项卡从 set1 移动到 set2，反之亦然。

但这不会移动包含选项卡内容的 div。因此，我编写了以下函数来移动 div（当触发 sortable 的over 事件时调用

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

此代码将 Div 移动到正确的集合，但现在当我尝试激活选项卡时，出现以下错误

Uncaught jQuery UI Tabs: Mismatching fragment identifier.

据我了解，UI 选项卡也使用某种内部表示，将选项卡内容与集合相关联。

我想要实现的基本功能是能够将一个选项卡从一组选项卡拖到另一组选项卡中。 我怎样才能做到这一点？

Answer 1

我已经解决了一个问题。这不是最有效的方法，但它有效

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
}

标签初始化如下

$("#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());
                 },
         });

#fileTabsVSplit 也进行了类似的初始化。