javascript - 限制可以放置 jqueryui 可排序项目的区域

Question

我有一个“ul”元素，其中最后一个“li”是创建新元素。由于 jqueryui sortable()，ul 是可排序的，我已经从 $('ul').sortable() 中排除了最后一个 'li' 元素，以便该元素不可拖动。但是，列表中的其他项目可以放在最后一个 li 元素下。我想阻止这种情况。有什么方法可以限制元素掉落的位置吗？

简单的概念 HTML:

<ul>
    <li class="list-element">potato</li>
    <li class="list-element">tomato</li>
    <li class="list-element">banana</li>
    <li class="list-element">pistacchio</li>
    <li class="new-element">new product</li>
</ul>

和.js:

$('ul').sortable();
$("ul").disableSelection();
$('ul').sortable({ cancel: '.new-element' });

fiddle :http://jsfiddle.net/s4yjpoaL/

如您所见，所有项目都可以拖到 .new-element li 下。有没有办法将可拖动性限制在最后一个 li 元素之前？

PS:我知道将最后一个元素放在 ul 之外会更容易，但这不是这里的重点:P

Answer 1

通过将排序的 items 指定为其他 li 项目来实现这一点。

http://jsfiddle.net/s4yjpoaL/2/

$('ul').sortable({
    items: ".list-element",
    cancel: ".new-element",
});

这会禁用最后一个元素的拖放区，并使其无法排序。