多个选项卡 + 可排序 + connectedLists 正确移动选项卡 + 目标 div答案

【问题标题】：Multiple tabs + sortable + connectedLists properly move tab + target div多个选项卡 + 可排序 + connectedLists 正确移动选项卡 + 目标 div
【发布时间】：2012-06-12 08:40:46
【问题描述】：

我设置了 3 组选项卡并使其可排序。我还通过 sortable 中的 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 加载的。

【问题讨论】：

标签： jquery-ui jquery-ui-tabs jquery-ui-sortable

【解决方案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>

【讨论】：