jQuery Sắp xếp - không kéo qua mục danh sách cuối cùng

Question

Tôi có một danh sách chưa được phân loại (UL) có chứa các mục danh sách có thể sắp xếp (LI), ngoại trừ mục danh sách cuối cùng. Tôi cần mục cuối cùng để ở cuối danh sách:

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

Tôi đang sử dụng jQuery Sortable để phân loại các mục trong danh sách.

Có ai biết cách tốt để ngăn các mục danh sách bị kéo qua mục danh sách cuối cùng không?

Answer 1

Bạn có thể vượt qua một chọn loại trừ mục cuối cùng trong items tùy chọn:

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

Answer 2

Hôm nay bạn có thể để nó đến CSS sử dụng nội dung và dữ liệu tùy chỉnh:

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 
} 

Sau đó Javascript sẽ chỉ vậy:

$("ul").sortable(); 

Xem nó làm việc trong JSBin

Answer 3

Bạn tốt hơn sử dụng cancel tài sản

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

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

hoặc thêm lớp để kéo li yếu tố và sau đó:

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