jQuery Sortable - не перетаскивать последний элемент списка

Question

У меня есть несортированный список (UL), который содержит сортируемые элементы списка (LI), за исключением последнего элемента списка. Мне нужен последний элемент, чтобы остаться в конце списка:

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

Я использую jQuery Sortable для сортировки элементов списка.

Кто-нибудь знает хороший способ предотвратить перетаскивание элементов списка за последний элемент списка?

Answer 1

Вы можете передать селектор, исключающий последний элемент в опции items :

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

Answer 2

Вам лучше использовать cancel свойство

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

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

или добавить класс к последнему элементу li, а затем:

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

Answer 3

Сегодня вы можете оставить его на CSS с использованием содержимого и пользовательских данных :

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
}

Тогда Javascript будет просто так:

$("ul").sortable();

Смотрите, это работает в JSBin