-1

我已经设置了 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 加载的。

4

1 回答 1

0

以下解决方法适用于大多数情况，但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>
于 2012-06-12T06:52:16.823 回答