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 id="divContainer" style="height: 100px; overflow: auto;">
        <div id="drop1" class="droppable" style="height: 500px">
        </div>
    </div>
    <div id="drop2" class="droppable" style="height: 50px;">
    </div>
    <div class="draggable" style="height: 50px;">
    </div>

CSS

div
        {
            margin: 10px;
        }
        .droppable
        {
            background-color: red;
        }
        .draggable
        {
            background-color: green;
        }

JavaScript

$('.draggable').draggable();
        $('.droppable').droppable({ drop: function (event, ui) { $(this).text('dropped'); } });