title: jQuery UI draggable-sortable does not work inside an initially inactive tab (jquery ui tabs)
body: <p>i'm developing a drag-and-drop interface using <strong>jQuery-UI Draggable</strong> + <strong>jQuery-UI Sortable</strong> inside a <strong>jQuery-UI Tabs</strong></p>
  
  <p>here's the HTML code:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-2"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-3"&gt;Three&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="tabs-1"&gt;
      One
  &lt;/div&gt;
  &lt;div id="tabs-2"&gt;
      Two
  &lt;/div&gt;
  &lt;div id="tabs-3"&gt;
      &lt;!-- BEGIN: DRAG &amp; DROP INTERFACE  --&gt;
      &lt;div class="toolbar"&gt;
          &lt;div class="item"&gt;
              &lt;div class="in"&gt;
                  Satu
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="sortable"&gt;
          &lt;div class="target"&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;        
      &lt;!-- END: DRAG &amp; DROP INTERFACE  --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here's the javascript code:</p>
  
  <pre>jQuery(function() {    
      jQuery( "#tabs" ).tabs({ selected: 0 });
      jQuery(".sortable .target").sortable({
          opacity: 0.5
      });    
      jQuery(".sortable .item, .toolbar .item").disableSelection();
      jQuery(".toolbar .item").draggable({
          connectToSortable: ".sortable .target",
          helper: "clone",
          revert: "invalid"
      });
  });</pre>
  
  <p>(you can see the whole code here: <a href="http://jsfiddle.net/dwiash/CWhFe/" rel="nofollow">http://jsfiddle.net/dwiash/CWhFe/</a>)</p>
  
  <p>it works well if the drag-and-drop interface is placed inside a tab that initially shown. But it doesn't work if it placed in an initially inactive/hidden tab. The problem is, the drag-and-drop interface must be placed inside a tab that initially hidden/inactive</p>
  
  <p>Can anyone help me fix this problem?</p>
  
  <p>thx :)</p>