Question

我有一个JQuery droppable，它包含许多动态创建的子元素。我需要对droppable中的其他元素的下落做出反应，但只是直接插入到这个元素中，而不是直接插入到其中一个子元素中。

我的问题是：我怎样才能确定其中一个孩子没有发生跌落？ event.target始终保持droppable，即使在孩子身上发生了下降。我已经看到了为子节点注册了mouseenter和mouseleave事件的解决方案，它改变了drop函数中读取的一些状态变量，但我不想使用这个解决方案。

有没有更好的方法来确定drop函数内部发生了滴的实际元素？或者是否有某种方法可以配置drop事件在儿童丢弃时不会触发？

Answer 1

我找到了一个可接受的解决方案。它基于您可以从ui.helper获得的鼠标位置信息。

起初，这个解决方案对我不起作用，因为至少在我的特定情况下，有时拖拽助手本身是由document.elementFromPoint（）返回的。使这种方法有效的解决方案是暂时隐藏帮助程序。这不是一个干净的解决方案，但我没有看到更好的解决方案。

$(dropElement).droppable({
    drop: function(event, ui) {
        var mouseXPosition = ui.helper.position().left,
            mouseYPosition = ui.helper.position().top;

        $(ui.helper).hide();
        var targetElement = document.elementFromPoint(mouseXPosition, mouseYPosition);
        $(ui.helper).show();

        if (targetElement.id === $(dropElement).attr('id')) {
            // do your drop logic here
        }           
    }
});

作为一个副节点，所提到的基于mouseleave的解决方案对我来说不起作用，因为droppable的子节点包含可拖放到droppable中的可拖动元素，在这种情况下，如果某些内容被拖出元素注册了mouseleave事件处理程序，不会触发mouseleave。但是，无论如何都应该避免使用事件处理程序来实现这些功能。

JQuery Droppable：确定是否在droppable或其子项上删除了元素

1 个答案: