Question

I’m using jQuery 1.8.2 & jQuery UI 1.9.0.

Here is an extension of the sortable demo from the jQuery UI Tabs Demo page with two sets of tabs + sortable, connected with each other http://jsfiddle.net/sujay/cUDLF/.

The move works fine but even after refresh the tabs don’t work as expected.

To reproduce the issue try moving an unselected tab from the top-set to the bottom-set and then select it.

You’ll see that the tab & the panel both have been moved to the bottom-set(The bottom-set selection will be unselected). But on selection the top-set tabs get unselected.

Update

I’m now able to make it work. Check http://jsfiddle.net/cUDLF/6/.

But sine the receive event only gets the absolute position and not the index. the position is lost. It always appends to the end of the tabs list.

If there was a way to find the index the problem will be solved.

Answer 1

I’ve finally found a way to solve this problem.

A working solution can be found at http://jsfiddle.net/cUDLF/12/.

Thanks to the tip in this answer.

The receive snippet looks like

            receive: function (event, ui) {
            var receiver = $(this).parent(),
                sender = $(ui.sender[0]).parent(),
                tab = ui.item[0],
                tab$ = $(ui.item[0]),
            // Find the id of the associated panel
                panelId = tab$.attr( "aria-controls" ),
                insertBefore = document.elementFromPoint(event.pageX,event.pageY);

            tab$ = $(tab$.removeAttr($.makeArray(tab.attributes).
                          map(function(item){ return item.name;}).
                          join(' ')).remove());
            tab$.find('a').removeAttr('id tabindex role class');
            if(insertBefore.parentElement == tab){
                insertBefore = document.elementFromPoint(event.pageX + insertBefore.offsetWidth, event.pageY);
            }
            insertBefore = $(insertBefore).closest('li[role="tab"]').get(0);
            if(insertBefore)
                tab$.insertBefore(insertBefore);
            else
                $(this).append(tab$);

            $($( "#" + panelId ).remove()).appendTo(receiver);
            tabs.tabs('refresh');
        }

Do let me know if you find any issues with this approach.