Jquery Sortable move the parent item along with its child

Guys i have an requirement in which i have items in jquery sortable. but i also want the child item of the parent to be moved along with the parent.for example when i drag the item1 in the browser , the sub item1,2,3 should be moved along with them and dropped . kindly let me know ,if there is any possibility through UI.

<ul>
<li>
<p> item 1</p>
<ul>
  <li>
     Sub item 1 
  </li>
  <li>
     Sub item 2
  </li>
  <li>
     Sub item 3 
  </li>
</ul>
</li>
<li&g开发者_JAVA百科t;
<p> item 2</p>
</li>
</ul>

You could apply a class or id to the first ul and only apply sortable to that unordered list:

HTML:

<ul id="sortable">
    <li>
        <p> item 1</p>
        <ul>
            <li>
                Sub item 1
            </li>
            <li>
                Sub item 2
            </li>
            <li>
                Sub item 3
            </li>
        </ul>
    </li>
    <li>
        <p> item 2</p>
    </li>
</ul>

JavaScript:

$("#sortable").sortable();

This way, the inner uls are not sortable.

Working example: http://jsfiddle.net/andrewwhitaker/Ds7ds/