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="tree">
<ul class="parent">
    <li class="treeParent">parent 1</li>
    <li class="treeChild">child 1_1</li>
    <li class="treeChild">child 1_2</li>
</ul>

<ul class="parent">
    <li class="treeParent">parent 2</li>
    <li class="treeChild">child 2_1</li>
    <li class="treeChild">child 2_2</li>
</ul>
</div>

CSS

.treeChild{
margin-left:20px;
}

JavaScript

$( "#tree" ).sortable
            (
                {
                connectWith: "#tree",
                items: 'ul'
                }
            );

        $( ".parent" ).sortable
            (
                {
                connectWith: "#tree .parent",
                items: 'li:not(.treeParent)'
                }
            );