Question

我设置了3组标签＆amp;使它们可以排序。我还通过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加载的。

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>

多个标签+可排序+连接列表正确移动标签+目标div

1 个答案: