title: jquery sortable cannot be dragged outside of accordion
body: <p>I have 2 connected sortable lists.  One is inside an accordion.  When I try to drag items from the sortable in the accordion, the helper disappears as soon as I get outside of the accordion.  I can drop to one of the other connected sortables and the item will display, but it just doesn't display while I'm dragging.  The accordion also scrolls down if I drag and item down.</p>
  
  <p>I can drag &amp; drop items from either of the other list wherever I need and it works fine.  How can I make items not disappear while dragging them from inside an accordion to the outside of it?</p>
  
  <p>I've already tried the containment option but that seems to have no effect.</p>
  
  <p>Here's code to expose the problem that I've taken from these examples: <a href="http://jqueryui.com/demos/sortable/#connect-lists" rel="nofollow noreferrer">http://jqueryui.com/demos/sortable/#connect-lists</a></p>
  
  <p>I want to be able to drag items from the accordion into the sortable list.  I can actually drop them into the list, but they disappear while I'm dragging them outside of the accordion.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;title&gt;Accordion Sortable Failure Test&lt;/title&gt;
  &lt;link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/&gt;
  &lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function(){
      $(".sortable").sortable({connectWith: ".sortable"});
      $("#accordion").accordion({ header: "h3" });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h2&gt;Sortable&lt;/h2&gt;
  &lt;ul class="sortable"&gt;
      &lt;li&gt;Row 1&lt;/li&gt;
      &lt;li&gt;Row 2&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h2&gt;Accordion&lt;/h2&gt;
  &lt;div id="accordion"&gt;
      &lt;div&gt;
          &lt;h3&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/h3&gt;
          &lt;ul class="sortable"&gt;
              &lt;li&gt;Lorem&lt;/li&gt;
              &lt;li&gt;ipsum&lt;/li&gt;
              &lt;li&gt;dolor&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h3&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/h3&gt;
          &lt;div&gt;Phasellus mattis tincidunt nibh.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h3&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/h3&gt;
          &lt;div&gt;Nam dui erat, auctor a, dignissim quis.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>