Multiple tabs + sortable + connectedLists properly move tab + target div

Question

I've setup 3 sets of tabs & made them sortable. I've also connected them through the connectedLists option in the sortable. When I move a tab from one list to the other, I want move the tab + the target div to the new context. Currently when I click on the moved tab the target is still in the older space, which is expected. But the main problem is that, it still works as part of the previous tabset. I'd like to change this behavior.

<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>

Note that all the tabs are ajax loaded.

score 0 · Answer 1 · answered Jun 12 '12 at 06:52

The following workaround works fine for most cases, but still throws Uncaught jQuery UI Tabs: Mismatching fragment identifier. exception , for a few tests. Wondering why this inconsistent behavior!

Also there is a slight shake, which can be reduced by reducing the timeout value.

<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>

Multiple tabs + sortable + connectedLists properly move tab + target div

1 Answers1