Accordion, sortable, draggable problem

Accordion, sortable, draggable problem

I have an accordion where the contents contain a sortable.  I also have a draggable that I want to be able to drag into the sortables. 
 
When I drag a draggable into a sortable, it does nothing UNTIL I first rearrange the sortable.  After I do that, I can drag onto that sortable.  In order to be able to drag onto another sortable inside of the accordion, I have to rearrange that sortable.
 
Is this a possible bug, or am I missing something?
 
 
 
 
 
Here is my entire html file:
 
------------------------------------------------------------------------------------------------------------------------------------------------
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Accordion DnD</title>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  $("#main").accordion({
             active:".ui-accordion-left", 
             alwaysOpen: false,
    collapsible: true,
             autoheight: false,
             clearStyle: true
      });
   
 $('#newItems > li').draggable({
  iframeFix: true,
  helper:'clone',
  connectToSortable:'.items',
  opacity:0.50,
  appendTo: 'body',
  revert: 'invalid',
  scroll: false,
 });
 
 $('.items').sortable({
  revert: 'invalid',
  scroll: false
 }); 
});
</script>























</head>
<body>
<div id="main">
 <H3><A href="#">Section 1</A></H3>
 <div>
     <ul class="items">
         <li>Item 1</li>
            <li> Item 2</li>
        </ul>
    </div>
    <H3><A href="#">Section 2</A></H3>
 <div>
     <ul class="items">
         <li>Item 1</li>
            <li> Item 2</li>
        </ul>
    </div>
    <H3><A href="#">Section 3</A></H3>
 <div>
     <ul class="items">
         <li>Item 1</li>
            <li> Item 2</li>
        </ul>
    </div>
</div>





















<div>
      <ul id="newItems">
        <li>New Item 1</li>
        <li>New Item 2</li>
        <li>New Item 3</li>
      </ul>
</div>






</body>
</html>