2010-09-28 8 views
10

J'ai cette liste qui peut être triée avec triable. Comment puis-je déplacer l'élément li avec la classe .neutral à la fin de la liste lorsque le tri est terminé?jQuery déplacer l'élément de liste à la fin de la liste

$(".thumbs").sortable({ 
    stop: function(event, ui) { 
     // move .neutral at the end of this list 
    } 
}); 

<ul class="thumbs"> 
    <li>red</li> 
    <li>green</li> 
    <li class="neutral">none</li> 
    <li>yellow</li> 
    <li>blue</li> 
<ul> 

Répondre

8

Vous pouvez ajouter (en mouvement) les à la fin de la liste avec .appendTo(), comme ceci:

$(".thumbs").sortable({ 
    stop: function(event, ui) { 
     $(this).find('.neutral').appendTo(this); 
    } 
}); 

You can give it a try here, cela devient tous les .neutral éléments à l'intérieur et les ajoute à this qui est le ul.thumbs nous sommes actuellement, cela fonctionnera pour plusieurs listes de vignettes indépendantes aussi.

+0

Bonjour Nick. En fait, j'essaie déjà quelque chose avec droppable et triable donc ça ne le fait pas pour moi .. Pourriez-vous jeter un oeil à http://jsfiddle.net/Y2ER7/ C'est basé sur l'exemple du shopping-cart jquery.ui.droppable. (Je dois trouver un moyen d'obtenir le src des pouces aussi bien) – FFish

3

L'équivalent serait la suivante:

$(".neutral").appendTo(".thumbs"); 
OR 
$(".thumbs").append(".neutral"); 

Vous pouvez déplacer un élément autour d'une page en sélectionnant et en annexant ou préfixer ailleurs. NB: soyez prudent avec la portée - si vous utilisez des classes et que cette interface utilisateur apparaît plusieurs fois sur une page, les sélecteurs ci-dessus devront être étendus à l'instance en cours en utilisant le paramètre ui transmis à la fonction stop.