title: Combinate JQuery UI sortable and draggable with Bootstrap Tab navigation
body: <p>I try build page based on Bootstrap with JQuery UI sortable list.
  I have one list in global space and two lists in Tabs
  and I like to drag items from external list and drop it to tab navigation for adding into list</p>
  
  <p>However when I switch to bootstrap tab navigation the external item on drop disappear but doesn't appear in tab list
  this is my example based on JQ UI "Connect list with Tab" </p>
  
  <p><a href="http://jsfiddle.net/dveremeev/96dsB/13" rel="nofollow">This is my JS FIDDLE</a></p>
  
  <pre><code>$(function() {
      $( "#sortable0, #sortable1, #sortable2" ).sortable().disableSelection();
  
      var $tabs = $( "#tabs" );//.tabs();
  
      $('#myTab a:last').tab('show');
  
      var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {
          var $item = $( this );
          var $list = $( $item.find( "a" ).attr( "href" ) )
            .find( ".connectedSortable" );
  
          ui.draggable.hide( "slow", function() {
            $tabs.tabs( "option", "active", $tab_items.index( $item ) );
            $( this ).appendTo( $list ).show( "slow" );
          });
        }
      });
    });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="external-tab"&gt;
      &lt;ul id="sortable0" class="connectedSortable ui-helper-reset"&gt;
        &lt;li class="ui-state-default"&gt;ExItem 1&lt;/li&gt;
        &lt;li class="ui-state-default"&gt;ExItem 2&lt;/li&gt;
        &lt;li class="ui-state-default"&gt;ExItem 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;div id="tabs" class="tabbable"&gt;
    &lt;ul id="myTab" class="nav nav-tabs"&gt;
      &lt;li&gt;&lt;a href="#tabs-1" data-toggle="tab"&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-2" data-toggle="tab"&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
        &lt;div id="tabs-1" class="tab-pane"&gt;
          &lt;ul id="sortable1" class="connectedSortable ui-helper-reset"&gt;
            &lt;li class="ui-state-default"&gt;Item 1&lt;/li&gt;
            &lt;li class="ui-state-default"&gt;Item 2&lt;/li&gt;
            &lt;li class="ui-state-default"&gt;Item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="tabs-2" class="tab-pane"&gt;
          &lt;ul id="sortable2" class="connectedSortable ui-helper-reset"&gt;
            &lt;li class="ui-state-highlight"&gt;Item 1&lt;/li&gt;
            &lt;li class="ui-state-highlight"&gt;Item 2&lt;/li&gt;
            &lt;li class="ui-state-highlight"&gt;Item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>