OK - I need your help with droppable/draggable menu

OK - I need your help with droppable/draggable menu

Hi people - I need Yours help.

I have html menu:

  1. <div id="tree" style="cursor: move;">
        <ul>
            <li class="draggable" id="recordsArray_6">
                <span class="droppable">PORTABLE ELECTRONICS</span>
                <ul>
                    <li class="draggable" id="recordsArray_7">
                        <span class="droppable">MP3 PLAYERS</span>
                        <ul>
                            <li class="draggable" id="recordsArray_8">
                                <span class="droppable">FLASH</span>
                            </li>
                        </ul>
                    </li>
                    <li class="draggable" id="recordsArray_9">
                        <span class="droppable">CD PLAYERS</span>
                    </li>
                    <li class="draggable" id="recordsArray_10">
                        <span class="droppable">2 WAY RADIOS</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>























I would like to drag <li> elements and drop them on <span> elements (insert it after </span>). So I have jQuery code:
  1. $("#tree li").draggable({ revert: "invalid" });   
       
        $(".droppable").droppable({
            tolerance: 'pointer',
            drop: function(event, ui){            
                $('<ul>' + ui.draggable.html() + '</ul>').appendTo($(this).parent());
                ui.draggable.remove();
            }
        });








but ui.draggable.html()  gives me:
  1. <span class="droppable ui-droppable">2 WAY RADIOS</span>
And where is <li class="draggable" id="recordsArray_10">....</li> ??
.parent() doesn't help, what is more I can't drag again dropped element - why ?