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">
<ul id="draggable" class="widget">
    <li>aaaaaa</li>
    <li>bbbbbb</li>
    <li>cccccc</li>
</ul>
<ul id="sortable" class="widget">
    <li>dddddd</li>
    <li>eeeeee</li>
    <li>ffffff</li>
</ul>

CSS

ul {
    border: 1px solid #ccc;
    list-style: none;
    padding: 5px;
}

li {
    border: 1px solid #ccc;
    padding: 3px;
}

#draggable {
    position: absolute;
    left:0;
    width: 200px
}

#sortable {
    position: absolute;
    left:220px;
    width: 200px
}

JavaScript

$(function(){
    $('#sortable').sortable();
    $('#draggable > li').draggable({
        connectToSortable: '#sortable',
        revert: 'invalid'
    });
});