jQuery ordinabile: non si trascina oltre l'ultimo elemento della lista

Question

Ho un elenco non ordinato (UL) che contiene voci di elenco ordinabili (LI), ad eccezione dell'ultima voce dell'elenco. Ho bisogno l'ultimo elemento di rimanere alla fine della 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> 

sto usando jQuery Sortable per l'ordinamento delle voci di elenco.

Qualcuno conosce un buon metodo per impedire che gli elementi dell'elenco vengano trascinati oltre l'ultimo elemento dell'elenco?

Answer 1

È possibile passare un selettore che esclude l'ultimo elemento nell'opzione items:

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

Answer 2

Oggi si può lasciare a CSS utilizzando contenuti e dati personalizzati:

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 
} 

Poi il Javascript sarebbe proprio così:

$("ul").sortable(); 

Vedere che sta funzionando nel JSBin

Answer 3

È meglio utilizzare cancel proprietà

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

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

o aggiungere classe per durare li elemento e poi:

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