jQuery Sortable - 没有拖过最后一个列表项

Question

我有一个包含可排序列表项（ LI ）的未排序列表（ UL ），最后一个列表项除外。 我需要最后一项留在列表的末尾：

<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

今天你可以使用内容和自定义数据将它留给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中工作

Answer 3

你最好使用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'
});