views:

51

answers:

2

I have this list that can be sorted with sortable. How can I move the li item with class .neutral to the end of the list when sorting is finished?

$(".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>
A: 

You can append (moving) them to the end of the list with .appendTo(), like this:

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

You can give it a try here, this gets all the .neutral elements inside and appends them to this which is the ul.thumbs we're currently in, this will work for multiple independent lists of thumbnails too.

Nick Craver
hi Nick. Actually I am trying something with droppable and sortable already so that doesn't do it for me.. Could you have a look at http://jsfiddle.net/Y2ER7/ It's based on jquery.ui.droppable shopping-cart example. (I need to find a way to get the src from the thumbs as well btw)
FFish
A: 

The equivalent would be the following:

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

You can move an element around a page by selecting it and appending or prepending it elsewhere.

NB: be careful with scope - if you're using classes and this UI appears multiple times on a page the above selctors will need to be scoped to the current instance using the ui parameter passed into the stop function.

sanchothefat