创建没有子项的列表项的子列表答案

【问题标题】：create sub list of list item with no children创建没有子项的列表项的子列表
【发布时间】：2010-07-26 15:27:43
【问题描述】：

jquery sortable 需要一点帮助。

我有一个这样的嵌套列表：

<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>

以及相关的列表：

<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>

我需要的是在拖动 LI 时创建一个无序列表，以便在将鼠标悬停在没有子列表的目标列表中的 li 上时创建新列表 - 如果项目未放入该列表，则在离开时将其删除列表。

最快的解决方法是让当前元素悬停在上面，但是用 sortable 来捕捉它有点麻烦。

这是我目前所拥有的：

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

$('#tree ul ul')
    .sortable({
        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();

非常感谢任何帮助。

【问题讨论】：

标签： jquery jquery-ui-sortable

【解决方案1】：

其实我没有和你一样的list 配置，我看到在一个li 里面你可以有ul 和li！

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

我只得到：

 <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>

在我的 jquery 函数中，我在 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');
       }

所以我管理您的版本以与我的列表一起使用^^，但我知道在我拖动当前元素之后我也得到了一个可放置区域，所以我可以将我的 li 作为子元素放置，但由于父元素是我的元素'我拖着，不可能我想删除

在我拖动元素后创建并触发启动事件！

对于排序的更新，我尝试使用序列化但失败了，不知道如何获取问题，它是孩子并正确订购，我不知道我在哪里

已被删除（它有哪个父级，如果它与它所在的其他 li 在一个列表中，因为正如您在屏幕截图中看到的那样，我为每个项目（1-2-3-4 ）最后一个代表列表中的顺序，您看到的父 id=3，我已经尝试了好几天:(

【讨论】：

【解决方案2】：

如果有人感兴趣，我已经设法解决了......

我使用 start 和 end 而不是 over and out 选项。

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')
       }

如果有人有更好的解决方案，请告诉我们...

【讨论】：