create sub list of list item with no children

Little help need with jquery sortable.

I have a nested list like so:

<div id="tree">
<ul>
    <li class="n-1">root
        <ul>
            <li class="n-2">Academic
                <ul>
                    <li class="n-5">Staff</li>
                    <li class="n-6">Courses</li>
                </ul>
            </li>
            <li class="n-3">Administration</li>
            <li class="n-4">Technical
                <ul>
                    <li class="n-6">Courses</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

and an associated list:

<div id="orphans">
    <ul>
        <li class="n-47">a</li>
        <li class="n-48">b</li>
        <li class="n-49">c</li>
        <li class="n-50">d</li>
    </ul>
</div>

What I need is to create an unordered list when dragging a LI so that when hovering over a li in the target list with no child list that new list is created - and remove it when leaving if the item was not dropped into that list.

Quickest soln would be to get the current element being hovered over but having a spot of bother catching that with sortable.

here is what I have so far:

$('#tree ul li li , #orphans ul li')
    .addClass('closed')
    .live('click',function(){
        $(this).toggleClass( 'open closed');
    });

$('#tree ul ul')
    .sortab开发者_运维问答le({
        items: 'li',
        connectWith:    '#tree ul ul',
        cursor:         'crosshair',
        helper:         'clone',
        zIndex:         999,
        placeholder:    'sort-highlight',
        opacity:        '0.6',
        over:           function(event,ui)
                        {
                            $(this).children('li.closed').toggleClass( 'open closed');
                            $(this).children('li:not(:has(ul)').append('<ul><li class="dummy">DADADA</li></ul>');
                        },
        out:            function(event,ui)
                        {
                            $('li.dummy').remove();
                            $('ul:empty').remove();
                        }
    })
    .disableSelection();


$('#orphans ul')
    .sortable({
        items: 'li',
        connectWith : '#tree ul',
        cursor: 'crosshair',
        helper: 'clone',
        zIndex: 999,
        placeholder: 'sort-highlight',
        opacity: '0.6'
    })
    .disableSelection();

any help very much appreciated.

Actually , i don't have the same diposition of list as you , i saw inside an li you can have ul and li !

> <li class="n-2">Academic
>                 <ul>
>                     <li class="n-5">Staff</li>
>                     <li class="n-6">Courses</li>
>                 </ul> 
> </li>

i only got :

 <ul id="sortable" class="connectedSortable">
    <li id='1' class="ui-state-default"><span> stuff ...</span></li>
    <li id='3' class="ui-state-default"><span> stuff ...</span></li>
    <ul id="sortable" class="connectedSortable">
         <li id='1' class="ui-state-default"><span> stuff ...</span></li>
         <ul id="sortable" class="connectedSortable">     
                <li id='4' class="ui-state-default"><span> stuff ...</span></li>   
         </ul>
    </ul>
    <li id='2' class="ui-state-default"><span> stuff ...</span></li>  
</ul> 

in my jquery function i've got this in start :

start: function(event,ui)
      {
     $(this).find('li').next().not('ul').after('<ul id="sortable" class="connectedSortable"><li class="hiddenli" style="height:0.1em;"></li></ul>');        
    $(this).sortable('refresh');
       }

So i manage your version to work with my list^^ , but i get i also get a droppable zone after my current element i'm dragging, so i can placemy li as children but since the parent is the element which i'm dragging, it's not possible i'd like to remove the

start: function(event,ui)
       {
           $(this).find('li').not(':has(ul)').append('<ul><li></li></ul>');
           $(this).sortable('refresh');
       } ,
stop:  function(event,ui)
       {
           $(this).find('li:empty').remove();
           $(this).find('ul:empty').remove();
           $(this).sortable('refresh')
       }