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

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 时，我想将“隐藏”类添加到：

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