多个jQuery UI选项卡 连接的排序物品无法按预期工作

Question

我正在使用jQuery 1.8.2＆amp;jQuery UI 1.9.0。

这是从jQuery UI Tabs演示页面上的可排序演示的扩展，并具有两组Tabs Cortable，彼此连接http://jsfiddle.net.net/sujay/cudlf/。

此举正常工作，但是即使在refresh之后，选项卡也无法正常工作。

要重现问题，请尝试将未选择的选项卡从顶部集移到底部集合，然后选择它。

您会看到Tab＆amp;面板都已移至底部集合（底盘选择将被未选择）。但是在选择上，顶部集选项卡未选择。

update

我现在能够使它起作用。检查http://jsfiddle.net/cudlf/6/。

但是，接收事件仅获得绝对位置，而不是索引。位置丢失了。它总是附加到选项卡列表的末端。

如果有办法找到索引，则将解决问题。

Answer 1

替换：

tabs.tabs( "refresh" );

with：

tabs.tabs('destroy');
tabs.tabs();

Answer 2

我终于找到了解决此问题的方法。

可以在http://jsfiddle.net/cudlf/12/上找到一个工作解决方案。

感谢此答案中的提示。

接收片段看起来像

            receive: function (event, ui) {
            var receiver = $(this).parent(),
                sender = $(ui.sender[0]).parent(),
                tab = ui.item[0],
                tab$ = $(ui.item[0]),
            // Find the id of the associated panel
                panelId = tab$.attr( "aria-controls" ),
                insertBefore = document.elementFromPoint(event.pageX,event.pageY);
            tab$ = $(tab$.removeAttr($.makeArray(tab.attributes).
                          map(function(item){ return item.name;}).
                          join(' ')).remove());
            tab$.find('a').removeAttr('id tabindex role class');
            if(insertBefore.parentElement == tab){
                insertBefore = document.elementFromPoint(event.pageX + insertBefore.offsetWidth, event.pageY);
            }
            insertBefore = $(insertBefore).closest('li[role="tab"]').get(0);
            if(insertBefore)
                tab$.insertBefore(insertBefore);
            else
                $(this).append(tab$);
            $($( "#" + panelId ).remove()).appendTo(receiver);
            tabs.tabs('refresh');
        }

请告诉我，如果您发现这种方法的任何问题。

Answer 3

这似乎适用于接收：

            tabs.tabs("destroy");
            $( "#" + panelId ).appendTo(receiver);
            tabs.tabs();

演示此处http://jsfiddle.net/nxtwrld/yxgur/1/

Answer 4

这是有效的示例：http：//jsfiddle.net/5qy5b/

如果NEWTAB和OLDTAB来自其他选项卡容器：）

，将解决方案封锁事件。

示例：

所提到的：

var tabs = $( "#tabs_1, #tabs_2" ).tabs();

使用此（更新）：

var tabs = $( "#tabs_1, #tabs_2" ).tabs({
        beforeActivate : function( event, ui ) {        
            if(ui.oldTab.parent().parent().attr("id") != ui.newTab.parent().parent().attr("id")) {
                if( $( this ).tabs( "option", "active") == -1) $( this ).tabs( "option", "active", 0); // NEW
                return false;
            }        
        }    
    });