限制可以放置 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",
});

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

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

Limiting the area in which a jqueryui sortable item can be dropped

javascript

jquery

jquery-ui