Extending the example?

Extending the example?

Hi,

How do I extend this example to include sub lists?


What I want to happen is for things to drag as they are currently. However, if you drop onto another item then it creates a new list and appears in this sublist.

So, my page would start like this.

  1. <ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    </ul>







And finish up like this after Item 1 is dragged into 2.

  1. <ul id="sortable">
    <li class="ui-state-default">Item 2
  2. <ul>
  3. <li class="ui-state-default">Item 1</li>
  4. </ul>
  5. </li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    </ul>




Can this be done in just a few extra lines of code or is this something that requires some serious coding?