• Sortable - Connected Lists
• Droppable - Shopping Cart
• Draggable - jQuery UI Draggable + Sortable
• Tabs - Sortable

After re-ordering any Tab the visual effect hide/show Tab does not seem to work on a "drop" action.

If the Tab order is re-arranged in the original order, the visual effect works as designed and as expected.

The issue might be somewhere in line #37 handling the (new) tab index.

The (Ajax) Post information is correct in any circumstance.

Has anyone an idea how to solve this nuisance? Thanks.

1. <script type="text/javascript">
2.       $(function () {
3.             $(" #sortable0, #sortable1")
4.             .sortable({
5.                   update: function (event, ui) {
6.                         var $parent = $(this).parent().attr("pid");
7.                         var newOrder = $(this).sortable("toArray").toString();
8.                         $.post('/Controller/sortable/', { parent: $parent, childs: newOrder })
9.                               .fail(function () { alert("error"); });
10.                         //    console.log( id + ':' + newOrder );
11.                   },
12.                   cancel: ".ui-state-disabled"
13.             })
14.             .disableSelection();
16.             var $tabs = $("#tabs").tabs();
17.             var $tabs_items = $("#tabs .ui-tabs-nav").sortable({
18.                   axis: 'x',
19.                   stop: function () {
20.                         $tabs.tabs("refresh");
21.                   },
22.                   update: function (event, ui) {
23.                         var data = $("#tabs .ui-tabs-nav").sortable('toArray').toString();
24.                         $.post('/Controller/sortable/', { order: data })
25.                         .fail(function () { alert("error"); });
26.                         //    console.log( 'order: ' + data );
27.                   }
28.             });
29.             var $tab_items = $("ul:first li", $tabs).droppable({
30.                   accept: ".connectedSortable li",
31.                   hoverClass: "ui-state-hover",
32.                   drop: function (event, ui) {
33.                         var $item = $(this);
34.                         var $parent = $(this).find("a").attr('id');
35.                         var $list = $($item.find("a").attr("href")).find(".connectedSortable");
36.                         ui.draggable.hide("slow", function () {
37.                               $tabs.tabs("option", "active", $tab_items.index($item));
38.                               $(this).appendTo($list).show("slow");
39.                               $.post('/Controller/droppable/', {  
40.                                     child: $(this).attr('id'),
41.                                     parent: $parent
42.                               })
43.                               .fail(function () { alert("error"); });
44.                               //    console.log(  $(this).attr('id') + ":" + $parent );
45.                   });
46.             }
47.       });
48. });
49. </script>
    // HTML from here
    <div style="clear:both;"></div>
    <div id="tabs">
        <ul>
            <li id="0"><a href="#tabs-0" id="0"><font class="">Books</font></a></li>
            <li id="1"><a href="#tabs-1" id="1"><font class="">Movies</font></a></li>
        < /ul>
        <div id="tabs-0" pid="0">
            <ul id="sortable0" class="connectedSortable ui-helper-reset">
                <li class="ui-state-default" id="42">Adams</li>
            </ul>
        </div><!-- tabs-0 -->
        < div id="tabs-1" pid="1">
            <ul id="sortable1" class="connectedSortable ui-helper-reset">
                <li class="ui-state-default" id="1984">Orwell</li>
    
            </ul>
        </div><!-- tabs-1 -->
    </div><!-- tabs -->