jquery-ui连接sortable：如何隐藏/显示第一项？

Question

我有这个HTML标记：

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Drop item here</li>
</ul>

当从＃sortable1中删除至少一个项目到＃sortable2时，我想将“hide”类添加到：

<li class="ui-state-highlight">Drop item here</li>

只是为了......隐藏它，因为这个“占位符”现在已经无用了，所以它变成了：

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight hide">Drop item here</li>
</ul>

然后，如果所有项目从＃sortable2退回到＃sortable1，则应再次删除类hide，以显示“占位符”

请问，好吗？谢谢！

Answer 1

好的，明白了......

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight placeholder">Drop item here</li>
</ul>

...

$('#sortable2').sortable({
    items: 'li:not(.placeholder)',
    connectWith: '.connectedSortable',
    update: function(){
        var placeholder = $(this).children('.placeholder');
        ($(this).children().length > 1) ? placeholder.hide() : placeholder.show();
    }
}).disableSelection();