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",
});

除了使其不可排序之外，这还会禁用最后一个元素的拖放区域。