jquery-ui - jquery ui可排序，第一项中的div块不可见

Question

我想让可排序列表的第一项中的 div -“small_box”始终不可见。我尝试使用 jquery first() 但它只工作一次，并且只适用于一个相同的元素，只要它被拖动。当我将它拖到第一个位置以外的位置然后为首先跳转的项目制作不可见的“small_box”时，我如何简单地让它重新可见？

我把现场例子放在这里：http: //jsfiddle.net/kriskasper/3knnn/

<ul id="sortable" class='connectedSortable'>
<li>
    <div class="small_box">small box</div>     
    <div class="big_box">big box</div>
</li>        
<li>
    <div class="small_box">small box</div>     
    <div class="big_box">big box</div>
</li>        
<li>
    <div class="small_box">small box</div>     
    <div class="big_box">big box</div>
</li>

<li>
    <div class="small_box">small box</div>     
    <div class="big_box">big box</div>
</li>       
</ul>

这是jquery ui函数：

    $(function() {
    $( "#sortable" ).sortable({
        connectWith: ".connectedSortable",
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true,
        opacity: 0.6,
        revert: 70

    });
});

请帮忙。

Answer 1

您应该使用可排序的插件事件。当连接的元素接收到一个项目时，会触发 sortreceive 事件。我的猜测是......

$("#sortable").bind("sortreceive", function(event, ui) {
    $(".connectedSortable .small_box").show();
    $("#sortable .small_box").first().hide();
});