jQuery UI 可排序和可拖动防止将可拖动项目移动到可排序的最后一个子项答案

【问题标题】：jQuery UI sortable and draggable prevent moving draggable item to sortable last childjQuery UI 可排序和可拖动防止将可拖动项目移动到可排序的最后一个子项
【发布时间】：2012-10-16 11:04:21
【问题描述】：

我正在使用 JQueryUI 来实现拖动和排序。

问题是如果可拖动项放在可排序的最后一个子项之后，如何使可排序拒绝可拖动项？

<ul id="draggable">
    <li>Drag Item 1</li>
    <li>Drag Item 2</li>
    <li>Drag Item 3</li>
    <li>Drag item 4</li>
</ul>

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li> 
    <li>Last item</li> //if I placed drag item after this, the sortable list reject the drag item
</ul>

我将 Drag Item 2 拖到 sortable
如果 Drag Item 2 放置在 sortable 的最后一个子项之前 -> 发生正常情况
如果 Drag Item 2 放置在 sortable 的最后一个子项之后 -> 可排序列表拒绝 Drag Item 2

有什么建议吗？？谢谢。

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-sortable

【解决方案1】：

我终于找到了我的问题的解决方案。你可以在这里看到：http://jsfiddle.net/yosafatade/KE2JM/3/

【讨论】：

您不应该将“4”硬编码到您的代码中...如果列表大小发生变化，4 将不再有效。
我知道，仅供参考：D

【解决方案2】：

问题来自#sortable height，因为当鼠标移动到最后一个项目后，会触发停止事件。

您可以在此处查看示例：jsFiddle

【讨论】：

我想做这个场景如果 Drag Item 2 放在 sortable 的最后一个子项之后 -> 可排序列表拒绝 Drag Item 2 并且 Drag Item 2 回到它的位置。但在你的例子中，场景并没有发生。