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未被觸發。但是，無論如何都應該避免使用事件處理程序來實現這些功能。