使用占位符使用 jQuery 连接的可排序列表强制 LI 到列表末尾答案

【问题标题】：Force LI to end of list with jQuery connected sortable lists using placeholder使用占位符使用 jQuery 连接的可排序列表强制 LI 到列表末尾
【发布时间】：2010-09-02 08:20:01
【问题描述】：

我使用 jQuery 创建连接的可排序列表来创建网站的主菜单。左侧列表包含可用页面，右侧列表包含当前菜单结构。我使用占位符来突出显示用户需要放置项目的位置。

目前用户可以将左侧列表中的项目添加到右侧列表中的任何位置。

我希望能够通过仅在此列表末尾显示占位符来强制用户只能将左侧列表中的项目添加到右侧列表的末尾。

这样可以不费事吗？

【问题讨论】：

标签： jquery jquery-ui drag-and-drop jquery-ui-sortable html-lists

【解决方案1】：

我一直在尝试做同样的事情。我发现选择器似乎“太聪明”无法获得这种效果的各种错误:(

但我目前使用这个效果很好：-

$(document.body).on("sortupdate","<selector for list>",function(event,ui) {
    if (ui.item.parent().attr('id')==$(this).attr('id')) {
        ui.item.appendTo($(event.currentTarget));
}   }   );

它允许删除项目，但随后将其移动到容器的末尾。

对于任何链接容器中的每个更新都会调用排序更新 - 因此它需要检查已删除的项目是否确实已放置在您希望项目强制结束的容器中。

【讨论】：

【解决方案2】：

根据您的帖子，在我看来，ui-sortable 背后的理念与您的设计目标相冲突。请考虑 ui-draggable（左 LI）和 ui-droppable（右 UL）。然后只需 { drop: function(e,ui) { $(this).append(ui.draggable) } )}。

【讨论】：

【解决方案3】：

您可能想尝试 jQuery UI：请参阅demo of the droppable feature。

尝试使用accept 选项。

【讨论】：