如果内部可拖放对象不接受可拖动对象，则防止拖放事件传播到父对象

Question

我有一个可放置的div#space 和一组可拖动的li.element。当我在div#space 中拖动li.element 时，会创建一个新的ul.group，li.element 会附加到ul.group，最后ul.group 可以放置。

给定

我希望这些元素的行为如下：

1. 当li.element 被丢弃在不包含它的ul.group 中时，li.element 将被添加到ul.group
2. 当li.element 被放到确实包含它的ul.group 中时，li.element 将恢复到原来的位置
3. 当li.element 被删除到div#space（在ul.group 之外）时，如上所述会创建一个新组。

问题在于，当一个元素被放到不接受它的 ul.group 上时，父级 div#space 将捕获该事件并创建一个新组。

ul.grpup 有一个 accept 函数，用于检查 droppable 是否为 element 以及它是否尚未被删除。

newULGroup.droppable({
    drop: ...
    accept: function(ui)
    {
        var isElement = ui.hasClass('element')
        var elementId = '.' + ui.data().id
        var isAlreadyPresent = $(this).find(elementId).length > 0
        return isElement && (!isAlreadyPresent)
    },
    greedy: true
});

如果不是通过接受所有内容并忽略丢弃处理程序中的内容，您将如何实现此行为？ （我没试过，但我想这会起作用）

---

编辑

尝试修复它

我修补了 jquery-ui-1.8.4.js 以将事件传递给接受函数。现在我可以使用$(event).stopPropagation() 停止传播，但我必须手动将可拖动助手动画返回到其原始位置以模拟恢复，然后将其从 dom 中移除。

accept: function(ui, event)
{
    var isCriteria = ui.hasClass('criteria')
    var criteriaId = '.' + ui.data().id
    var isAlreadyPresent = $(this).find(criteriaId).length > 0
    var accepted = isCriteria && (!isAlreadyPresent)
    if (event && !accepted)
    {
        $(event.target).animate(ui.offset(), {complete: function() {$(this).remove()}})
        $(event).stopPropagation()
    }
    return accepted
}

不幸的是，它似乎也破坏了原始元素的 draggable 行为。为什么，哦，为什么？

Answer 1

我设法实现了类似的行为，尽管使用了未记录的 jQuery.ui 功能。

如果您查看 jquery.ui.draggable 实现（至少对于 v1.8.16），revert 选项也可以是一个函数。它有this是可拖动元素，单个参数是接受drop的droppable，返回值是boolean，表示是否恢复可拖动元素。

所以在你的情况下你需要

1. 让您的 div#space 和 ul.group 始终接受掉落并保持贪婪
2. 在 ul.group drop 处理程序中进行检查，仅当项目尚未在组中时才处理它
3. 在可拖动的revert 函数中进行类似检查，如果它已经在组中，则恢复自身。