将 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 移动到正确的集合，但现在当我尝试使选项卡处于活动状态时，我收到以下错误

未捕获的 jQuery UI 选项卡：片段标识符不匹配。

我从中了解到的是，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 也有类似的初始化。