多个 jQuery UI 选项卡 + 连接的 Sortables 无法按预期工作

Question

我正在使用 jQuery 1.8.2 和 jQuery UI 1.9.0。

这是来自jQuery UI Tabs Demo page 的可排序演示的扩展，带有两组选项卡+可排序，相互连接http://jsfiddle.net/sujay/cUDLF/。

移动工作正常，但即使在refresh 之后，选项卡也无法按预期工作。

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

您会看到选项卡和面板都已移至底部设置（底部设置的选择将被取消选择）。但是在选择时，顶部的选项卡会被取消选择。

更新

我现在可以让它工作了。检查http://jsfiddle.net/cUDLF/6/。

但是正弦接收事件只获取绝对位置而不是索引。位置丢失。它总是附加到标签列表的末尾。

如果有办法找到索引，问题就会迎刃而解。

Answer 1

替换：

tabs.tabs( "refresh" );

与：

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

Answer 2

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

可以在http://jsfiddle.net/cUDLF/12/找到一个可行的解决方案。

感谢this answer 中的提示。

接收sn-p的样子

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