我正在使用 jQuery 1.8.2 和 jQuery UI 1.9.0。
这是jQuery UI 选项卡演示页面中可排序演示的扩展，其中包含两组选项卡 + 可排序，相互连接http://jsfiddle.net/sujay/cUDLF/。
此举效果很好，但即使refresh选项卡无法按预期工作。
要重现此问题，请尝试将未选择的选项卡从顶部集移动到底部集，然后选择它。
您会看到选项卡和面板都已移至底部设置（底部设置的选择将被取消选择）。但是在选择时，顶部的选项卡会被取消选择。
更新
我现在可以让它工作了。检查http://jsfiddle.net/cUDLF/6/。
但是正弦接收事件只获得绝对位置而不是索引。位置丢失。它始终附加到选项卡列表的末尾。
如果有办法找到索引，问题就会得到解决。
代替：
tabs.tabs( "refresh" );
和：
tabs.tabs('destroy');
tabs.tabs();
我终于找到了解决这个问题的方法。
可以在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');
}
如果您发现这种方法有任何问题，请告诉我。
这是工作示例：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;
}
}
});
这似乎适用于接收：
tabs.tabs("destroy");
$( "#" + panelId ).appendTo(receiver);
tabs.tabs();