代码之家 › 专栏 › 技术社区 › Ian Wood

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

jquery-ui-sortable jquery

Ian Wood · 技术社区 · 15 年前

jquerysortable不需要什么帮助。

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

非常感谢您的帮助。

2 回复 | 直到 15 年前

MoD 15 年前

其实,我的单子位置和你不一样,我看到安利里面你可以有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作为子元素放置,但由于父元素是我正在拖动的元素,因此我不可能删除

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

Ian Wood 15 年前

如果有人对……感兴趣,我已经设法解决了。。。。

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

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