创建没有子项的列表项的子列表 [英] create sub list of list item with no children

问题描述

jquery可排序几乎不需要帮助.

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>

和相关列表:

<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上时会创建新列表-如果该项目未放入其中，则在离开时将其删除列表.

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.

最快的解决方法是将当前元素悬停在上面，但是有一个麻烦的地方是使用sortable进行捕捉.

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

非常感谢任何帮助.

推荐答案

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

I have managed a work around if anyone is interested....

而不是我使用开始和结束的over和out选项.

instead of the over and out options I have used start and end.

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

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

If anyone has better solution please please please let us know...

这篇关于创建没有子项的列表项的子列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！