jquery ui sortable, bloc div dans le premier élément non visible

Question

Je veux que la div - "small_box" dans le premier élément de la liste de tri soit toujours invisible. J'ai essayé avec jquery first() mais cela ne fonctionne qu'une fois et seulement pour un même élément à chaque fois qu'il est déplacé. Comment est-ce que je peux le rendre simple pour être visible quand je le glisse dans autre chose que la première place et que je rends invisible "small_box" pour l'objet qui saute en premier lieu?

Je mets l'exemple en direct ici: 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> 

Et voici fonction jquery ui:

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

    }); 
}); 

S'il vous plaît aider.

Answer 1

Vous devriez jouer avec les événements du plugin sortable. L'événement sortreceive est déclenché lorsque l'élément connecté reçoit un élément. Je dirais quelque chose comme ...

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