Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div class="container-24">
<div class="drag-drop clearfix">
        <div class="prefix-1 grid-7">
          <h3 class="collapse-top">blah</h3>

          <p>blah<br />
            blah<br />
            blah</p>
        </div><!-- .grid-7 -->

        <ul class="droppable grid-9">
          <li>xxxxxxxxxxx</li>
          <li>yyyyyyyyyyyy</li>
          <li>zzzzzzzzzzzzzz</li>
        </ul>
      </div><!-- .drag-drop -->

  <div class="container-24">
      <div class="drag-drop clearfix">
        <div class="prefix-1 grid-7">
          <h3 class="collapse-top">blah</h3>

          <p>blah<br />
            blah<br />
            blah</p>
        </div><!-- .grid-7 -->
          
        <ul class="droppable grid-9">
          <li>aaaaaaaa</li>
          <li>bbbbbbbbbbbbbbbb</li>
          <li>ccccccccccccccc</li>
        </ul>
      </div><!-- .drag-drop -->
</div>

CSS

.drag-drop {
  background-color: #E7F2FB;
  border: #99C0E1 solid 1px;
  padding: 28px 0;
}

.droppable {
  background-color: #FFF;
  border: #CCC solid 1px;
  min-height: 80px;
  margin: 0;
  padding: 5px;
}
  .droppable li {
    background: url(/www/files/assets/images/ib-drag-drop.png) no-repeat 0 0;
    cursor: move;
    line-height: 19px;
    list-style-type: none;
    margin: 5px 0;
    padding: 1px 0 1px 24px;
  }
    .droppable li:hover {
      background-color: #F4F4F4;
      background-position: 0 -59px;
      border: #CCC solid 1px;
      padding: 0 0 0 24px;
    }

JavaScript

// drag-n-drop
  $('.droppable').sortable({
    axis: 'y',
    connectWith: '.droppable',
    zIndex: 5,
    appendTo: 'body'
  }).disableSelection();