title: Working with jQuery UI "Accordion and Droppable"
body: <p>I have a question with jQuery UI Accordion and Droppable.
  How can I Drag an item from #tab-1 to #tab-2?
  I have view the demo in jqueryui.com "Sortable - Connect lists with Tabs", but I can't use this for Accordion :(</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;div id="tabs-1"&gt;
      &lt;h3&gt;A&lt;/h3&gt;
      &lt;div&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;li class="ui-state-default"&gt;Item 4&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;Item 5&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="tabs-2"&gt;
      &lt;h3&gt;B&lt;/h3&gt;
      &lt;div&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;li class="ui-state-highlight"&gt;Item 4&lt;/li&gt;
          &lt;li class="ui-state-highlight"&gt;Item 5&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Script:</p>
  
  <pre><code>$(function() {
      $( "#sortable1, #sortable2" ).sortable().disableSelection();
  
      var $tabs = $( "#tabs" ).accordion({
          heightStyle: "content",
          collapsible: true,
          header: "&gt; div &gt; h3",
          beforeActivate: function( event, ui ) {
              $("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 34 );
          },
          activate: function( event, ui ) {
              $("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 32 );
          }
      }).sortable({
          axis: "y",
          handle: "h3",
          stop: function( event, ui ) {
              ui.item.children( "h3" ).triggerHandler( "focusout" );
          }
      });
  });
  </code></pre>