jQuery的：在多個重疊的目標降項目

Question

的jsfiddle（演示）：http://jsfiddle.net/mr_goodcat/9a7qv/5/

我有一種情況，即一個項目，滴在多個重疊的目標。問題是隻有一個drop處理程序在它發生時被調用。如果代碼如下：

$(document).ready(function() { 
    $("#droppable1").droppable(); 
    $("#droppable2").droppable(); 
    $("#droppable3").droppable(); 

    $("#draggable").draggable(); 

    $("#droppable1").bind("drop", drop); 
    $("#droppable2").bind("drop", drop); 
    $("#droppable3").bind("drop", drop); 
}); 

function drop(e, ui) { 
    $("#result").prepend("<p>" + ui.draggable.attr("id") + " ON " + $(this).attr("id") + "</p>"); 
} 

我只會看到「draggable ON droppable1」追加到結果div。 （什麼是intresting：＃droppable3在頂部）。

問題：如何（如果可能的話）在每個droppable上調用drop事件？

Answer 1

我個人發現jQuery的拖放功能是不完整的。看看這個jQuery擴展，它可以讓你做到你想要的。這個鏈接上有一個演示，它完全符合你的需求。

http://threedubmedia.com/code/event/drop

Answer 2

「滴」 是不是真正的JavaScript事件。 jQuery所做的就是按照它們定義的順序循環所有可拖拽的元素，並返回第一個與被刪除元素的座標相匹配的元素。也許你可以爲此定義自己的功能。你的拖放功能應該做的是按照堆棧順序檢查拖放區域。我不知道如何檢查元素的堆棧順序，但是如果您使用的瀏覽器遵守css2規範，則可以預測它。

此外，如果所有拖放區域都相對定位，則足以檢查每個元素的z索引以及它們的聲明順序。如果您使用負頁邊空白或其他方法堆疊頁面上的元素，則必須閱讀css2堆疊規範。 http://www.w3.org/TR/CSS2/zindex.html

但是，如果您事先知道並且沒有更改，您可以按照其對應堆棧順序的順序初始化可放置區域。在你的例子中，這將是：

$("#droppable3").droppable(); 
$("#droppable2").droppable(); 
$("#droppable1").droppable();