jQuery ordenable: sin arrastrar el último elemento de la lista

Question

Tengo una lista sin clasificar (UL) que contiene elementos de la lista ordenable (LI), excepto el último elemento de la lista. Necesito el último elemento alojarse en el final de la lista:

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 2</li> 
    <li>Last item</li><!-- Should always be the last item --> 
</ul> 

estoy usando jQuery Sortable para la clasificación de los elementos de la lista.

¿Alguien sabe una buena manera de evitar que los elementos de la lista sean arrastrados más allá del último elemento de la lista?

Answer 1

Puede pasar un selector que excluye el último elemento de la opción items:

$("ul").sortable({ 
    items: "li:not(:last-child)" 
}); 

Answer 2

Hoy en día se puede dejar en manos de CSS usando contenido y datos personalizados:

HTML:

<ul data-lastitem="Last item"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 2</li> 
</ul> 

CSS:

ul:after { 
    content: attr(data-lastitem) 
} 
li, ul:after { 
    border: 0.15em solid #ccc; 
    margin: 0.8em 0; 
    padding: 0.8em; 
    list-style: none; 
    background-color: #FFF; 
    display:block 
} 

Entonces el Javascript sería tan:

$("ul").sortable(); 

Ver que está funcionando en el JSBin

Answer 3

Se utiliza mejor cancel propiedad

http://api.jqueryui.com/sortable/#method-cancel

$("ul").sortable({ 
     items: 'li', 
     cancel: 'li:last-child' 
}); 

o añadir clase al último elemento de li y luego:

$("ul").sortable({ 
     items: 'li', 
     cancel: '.last-el-class' 
});