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="demo" style="float:left; width:100%;">

  <div style="float:left; width:200px;">
    <div style="float:left; width:190px;">
    <div style=" height:300px;margin: 0; padding: 0; width: 160px; border: 1px solid #ccc;">
    <ul id="sortable" class="sortable">
      
      <li class="item">Item A1</li>
      <li class="item">Item A2</li>
      <li class="item">Item A3</li>
      <li class="item">Item A4</li>
      <li class="item">Item A5</li>
      <li class="item">Item A6</li>
      <li class="item">Item A7</li>
      <li class="item">Item A8</li>
      <li class="item">Item A9</li>
      <li class="item">Item A10</li>
      <li class="item">Item A11</li>
      <li class="item">Item A12</li>
      <li class="item">Item A13</li>
      <li class="item">Item A14</li>
      <li class="item">Item A15</li>
      <li class="item">Item A16</li>
      <li class="item">Item A17</li>      
    </ul>
  </div>
  </div>
  </div>
    <div style="float:left; width:200px;">
<div style="float:left; width:190px;">
      <div style="overflow:auto; margin: 0; padding: 0; width: 160px; height: 110px; border: 1px solid #ccc;">
        
        <ul id="sortable2" class="sortable">
               
        </ul>  
      </div>
      </div>
      <div style="float:left; width:190px;">
      <div style="float:left; overflow:auto; margin: 0; padding: 0; width: 160px; height: 110px; border: 1px solid #ccc;">
   <ul id="sortable3" class="sortable">
           
        </ul> 
      </div>
      </div>
  </div>
</div>

CSS

body{font-family:verdana; font-size:0.8em;}
    .sortable { overflow:auto; list-style-type: none; margin: 0; padding: 0; }
    .sortable li { margin: 3px 2px; padding: 0.5em;  height: 10px; }
    #sortable { height:300px;}
    #sortable2 { height:100px; margin-bottom:5px}
    #sortable3 { height:100px; margin-bottom:5px}
    .item { background:#eee; border:1px solid #ccc}

JavaScript

$( ".sortable" ).sortable({
      connectWith: 'ul', 
      scroll: true,
       receive: function (e, ui) {
         $(this).prepend(ui.item);
         $(this).scrollTop(0);
       }
    });