Test Case Boilerplate

Fork this way...

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<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

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