如果内部droppable不接受draggable,则阻止drop事件传播到父级

时间:2011-08-07 23:17:03

标签: jquery-ui jquery-ui-draggable jquery-ui-droppable

我有一个可放置的div#space和一个可拖动的li.element集合。当我在li.element中拖动div#space并创建新的ul.group时,li.element会附加到ul.group,最后ul.group是做得不好。

给出

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

  1. 如果<{1}}中的li.element被删除不包含,则ul.group将被添加到li.element
  2. 当<{1}}被<{1}}删除确实包含时,ul.group将恢复为原始位置
  3. li.elementul.group之外)li.element被删除时,如上所述创建了一个新组。
  4. 问题是当一个元素被放置在不接受它的li.element上时,父div#space将捕获该事件并创建一个新组。

    ul.group有一个 accept 函数,用于检查droppable是否为元素,以及它是否已被删除。

    ul.group

    如果不通过接受所有内容并忽略drop handler中的内容,您将如何实现此行为? (我没有尝试,但我想这会奏效)


    修改

    尝试解决此问题

    我修补了jquery-ui-1.8.4.js以将事件传递给accept函数。现在我可以使用div#space来停止传播,但是我必须手动将可拖动的帮助器设置回原来的位置以模拟恢复,然后将其从dom中删除。

    ul.grpup

    不幸的是,它似乎也破坏了原始元素中的 draggable 行为。为什么,为什么?

1 个答案:

答案 0 :(得分:1)

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

如果查看jquery.ui.draggable实现(至少对于v1.8.16),revert选项也可以是一个函数。它有this是可拖动元素,单个参数是接受放置的droppable,返回值是boolean以指示是否还原可拖动。

所以在你的情况下你需要

  1. 让您的div#spaceul.group始终接受丢弃并贪婪
  2. 检查ul.group drop处理程序并仅处理项目(如果它不在该组中)
  3. 在可拖动的revert函数中执行类似检查,如果它已经在组中,则还原自身。