1

我有一个 droppablediv#space和一个 draggable 集合li.element。当我li.element在div#space新ul.group创建的 a 中拖动 a 时，将li.element附加到 theul.group并最终将其设为ul.groupdroppable。

给定

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

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

问题是当一个元素被放到一个ul.group不接受它的元素上时，父元素div#space会捕捉到这个事件并创建一个新组。

有ul.grpup一个接受函数来检查 droppable 是否是一个元素以及它是否尚未被删除。

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
}

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

4

1 回答 1

1

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

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

所以在你的情况下，你需要

  1. 有你的div#space，ul.group总是接受滴，贪婪
  2. 只在 ul.groupdrop处理程序中检查并处理项目，如果它还没有在组中
  3. 在可拖动功能中进行类似的检查，revert如果它已经在组中，则恢复自身。
于 2011-11-13T20:50:12.250 回答