创建不带下级的列表项的子列表

Question

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();

非常感谢您的帮助。

Answer 1

如果任何人感兴趣的话我已经做了一个工作……

我使用了start和end，而不是over和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')
       }

如果任何人有更好的解决方案，请让我们知道…

Answer 2

其实，我没有你那样的列表，我看到在安莉里面你可以有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');
       }

因此，我管理您的版本以处理我的列表^^，但我得到在我当前拖动的元素之后还会得到一个可放入区域，因此我可以将my li作为子元素放置，但由于父元素是我正在拖动的元素，所以我不可能删除

在我正在拖动的元素之后创建

• ，这会触发start事件！

对于排序的更新，我尝试使用serialize但失败了我不知道如何获取问题和它的子项并正确排序我不知道我的

• 被放在哪里(它有哪个父项，如果它在一个列表中，它有其他的位置，因为正如你在屏幕截图上看到的，我为每一项都有一个数字(1-2-3-4)最后一个表示有父id=3的列表中的顺序，我已经尝试了几天了:(