JQuery Droppable：确定元素是否落在droppable或其子级上

Question

我有一个JQuery droppable，其中包含一些动态创建的子元素。我需要对其他元素的滴落作出反应，但只会直接滴入这个元素，而不会落入其中一个子元素中。

我的问题是：我怎么能确定这个下降不发生在一个孩子的顶部？ event.target始终保存可丢弃的内容，即使丢弃发生在孩子身上也是如此。我已经看到了解决方案，其中mouseenter和mouseleave事件被注册给了子项，这些项改变了在drop函数中读取的一些状态变量，但是我不想使用这个解决方案。

有没有更好的方法来确定drop函数内部发生的实际元素？或者有什么办法可以配置drop子节点发生drop事件时不应该触发吗？

Answer 1

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

起初，这个解决方案并不适合我，因为至少在我的具体情况下，有时候dragler帮助本身是由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事件处理程序的元素外，mouseleave未被触发。但是，无论如何都应该避免使用事件处理程序来实现这些功能。