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="scrollArea"> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
  </div> 
 
  <ul class="inv"> 
    <li class="dragArea">Drag me</li> 
    <li class="dragArea">Drag me</li> 
    <li class="dragArea">Drag me</li> 
  </ul>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

   .scrollArea {
    overflow: auto;
    width: 400px;
    height: 600px;
  }      
  .dropArea {
    height: 100px;
    width: 380px;
    padding: 0 0 0 0;
    background-color: #CCCCCC;
    margin: 10px 0 10px 0;
  }
  .dragArea {
    width: 100px;
    height: 30px;
    background-color: #FF0000;
    margin: 10px 0 10px 0;
  }
  .inv {
    position: absolute;
    left: 450px;
    top: 10px;
    width: 150px;
    height: 600px;
  }

JavaScript

jQuery(document).ready(function(){
        $(".dropArea").droppable({
          drop: function(ev, ui) { $(ui.draggable).html("dropped"); }
        })
        .sortable();
        $(".dragArea").draggable({
          connectToSortable: '.dropArea',
          revert: 'invalid',
          helper: 'clone'
        });
    });