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

今天您可以使用内容和自定义数据将其保留为 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'
});

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

3 个答案: