Having problems getting sortables working reliably with the following HTML.  (I see the issue with the unordered lists, looking into that... but this has been ongoing even before the unordered lists were introduced)

## [javascript]
    // make the colums sortable
    $("#testArea").sortable({
      items: $(".panels_panel > ul"),
      handle: ".panels_title",
      placeholder: ".panels_placeholder",
      revert: true
    });

## [html]
<div id="testArea" class="panelContainer panels_container ui-sortable" style="position: relative;">
  <div class="panels_column" style="float: left; width: 450px;">
  <ul/>
    <li>
      <div class="panel panels_panel" id="test">
        <div class="panelTitle panels_title">
          <div class="panelMaximize panels_max" title="Expand panel">
            <img src="img/default_max.png"/>
          </div>
          <img src="img/default_icon.png"/>New Panel
        </div>
        <div class="panelContent panels_content" style="overflow: hidden; width: 100%; height: 150px; display: block;">
          <h2>Test Content</h2>
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 31</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
            <li>item 10</li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <div class="panel panels_panel" id="test3">
        <div class="panelTitle panels_title panels_mandatory">
          <div class="panelMaximize panels_max" title="Expand panel">
            <img src="img/default_max.png"/>
          </div>
          <img src="img/default_icon.png"/>Panel 3
        </div>
        <div class="panelContent panels_content" style="overflow: hidden; width: 100%; height: 150px;">
          <h2>Panel 3</h2>
          <p>content panel</p>
        </div>
      </div>
    </li>
  </div>
  <div class="panels_column" style="float: left; width: 450px;">
    <ul/>
    <li>
      <div class="panel panels_panel" id="test2">
        <div class="panelTitle panels_title">
          <div class="panelMaximize panels_max" title="Expand panel">
            <img src="img/default_max.png"/>
          </div>
          <img src="img/default_icon.png"/>Panel 2
        </div>
        <div class="panelContent panels_content" style="overflow: hidden; width: 100%; height: 150px; display: block;">
          <h2>Panel 2</h2>
          <p>content panel</p>
        </div>
      </div>
    </li>
  </div>
</div>