多个标签+排序+ connectedList正确移动标签+目标div

Question

我已经设置了3组标签&使它们可以排序。 我也通过可排序的connectedLists选项连接它们。 当我将标签从一个列表移动到另一个列表时，我想将标签+目标div移动到新的上下文中。 目前，当我点击移动的选项卡时，目标仍在旧空间中，这是预期的。但主要的问题是，它仍然是以前的标准集的一部分。 我想改变这种行为。

<div id="tabs-1"><ul class="gadget-tabs">...</ul></div> 
<div id="tabs-2"><ul class="gadget-tabs">...</ul></div> 
<div id="tabs-3"><ul class="gadget-tabs">...</ul></div> 
<script> 
$('div[id^=tabs-]').tabs(); 
$('.gadget-tabs').sortable({ 
     connectWith: ".gadget-tabs" 
}).disableSelection(); 
</script> 

请注意，所有选项卡都是ajax加载的。

Answer 1

以下解决方法适用于大多数情况，但对于少数测试仍然会抛出Uncaught jQuery UI Tabs: Mismatching fragment identifier.异常。想知道为什么这种行为不一致！

此外还有一个轻微的摇晃，可以通过减少超时值来减少。

<div id="tabs-1"><ul class="gadget-tabs">...</ul></div> 
<div id="tabs-2"><ul class="gadget-tabs">...</ul></div> 
<div id="tabs-3"><ul class="gadget-tabs">...</ul></div> 
<script> 
$('div[id^=tabs-]').tabs(); 
$('.gadget-tabs').sortable({ 
     connectWith: ".gadget-tabs", 
     receive: function (event, ui) { 
      var receiver = $(this).parent(); 
      var sender = $(ui.sender[0]).parent(); 
      receiver.tabs('destroy'); 
      sender.tabs('destroy'); 
      setTimeout(function() { receiver.tabs(); sender.tabs()}, 100); 
     } 
}).disableSelection(); 
</script>