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也有类似的初始化。

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

1 个答案: