Jquery ui 将jQuery UI选项卡移动到另一个集合

我有两组标签（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移动到正确的集合，但是现在当我尝试激活一个选项卡时，我得到了以下错误

uncaughtjqueryui选项卡：片段标识符不匹配。

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

我试图实现的基本功能是能够将一个选项卡从一组选项卡拖动到另一组选项卡。

---

我怎样才能做到这一点呢？

我已经想出了一个解决办法。这不是最有效的方法，但它很有效

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初始化方法。

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

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。

也许你必须调用某种函数来重新初始化tabs。我在tabs页面上查看了一下，但它似乎没有说什么。嗯，也许是销毁它，或者是重新创建它。但这可能会造成一些闪烁。也许你必须调用某种函数来重新初始化它alize标签我查看了标签页，但它似乎没有说任何关于它的内容。嗯，可能是破坏了它，或者是重新创建了它。但这可能会造成一些闪烁。似乎这里面有一些错误，导致一些标签在某个点传输时丢失，尽管我还没有弄清楚在哪里。你能找到吗d一个更好的解决方案，它更健壮？还没有，尽管我已经有一段时间没有接触到这部分代码了。正在处理系统的一些其他方面。这其中似乎有一些缺陷，导致一些选项卡在某个时候传输时丢失，尽管我还没有弄清楚在哪里。你能找到更好的解决方案吗，tha更健壮吗？还没有，虽然我已经有一段时间没有接触到这部分代码了。正在处理系统的其他方面。