Question

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

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

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

这可以不用太麻烦吗？

Answer 1

我一直在尝试做同样的事情。我发现似乎各种各样的错误“太聪明了”＃39;选择器可以获得这种效果：（

但我目前正在使用这个效果： -

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

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

为任何链接容器中的每次更新调用排序更新 - 因此它需要检查已删除的项目是否确实已丢弃在您希望项目强制结束的容器中。

Answer 2

根据你的帖子的声音，在我看来，ui-sortable背后的哲学与你的设计目标相冲突。考虑使用ui-draggable（左侧LI）和ui-droppable（右侧UL）。然后简单地{drop：function（e，ui）{$（this）.append（ui.draggable）}）}。

Answer 3

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

尝试使用accept选项。

使用占位符强制LI使用jQuery连接的可排序列表结束列表

3 个答案: