Javascript jQuery：在多个重叠目标上放置项

JSFIDLE（演示）：

我有一种情况，一件物品落在多个重叠的目标上。问题是，发生时只调用一个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>");
}

$（文档）.ready（函数（）{
$（“#droppable1”）.droppable（）；
$（“#droppable2”）.droppable（）；
$（“#droppable3”）.droppable（）；
$（“#可拖动”）.draggable（）；
$（“droppable1”）.bind（“drop”，drop）；
$（“droppable2”）.bind（“drop”，drop）；
$（“droppable3”）.bind（“drop”，drop）；
});
函数删除（e、ui）{
$（“#result”）.prepend（“”+ui.draggable.attr（“id”）+”在“+$（this.attr（“id”）+”
”）上；
}

我将只看到“Dragable ON droppable1”附加到result div（有趣的是：#droppable3在顶部）

---

问题：如何（如果可能的话）使drop事件在每个Dropable上都被调用？

我个人认为jQuery拖放功能不完整。查看这个jQuery扩展，它允许您完全按照自己的意愿进行操作。在这个链接上有一个演示，它正是你想要的

---

我个人认为jQuery拖放功能不完整。查看这个jQuery扩展，它允许您完全按照自己的意愿进行操作。在这个链接上有一个演示，它正是你想要的

“drop”不是真正的javascript事件。jQuery所做的是按照定义的顺序循环所有可拖放元素，并返回与被拖放元素的坐标匹配的第一个元素。也许您可以为此定义自己的函数。drop函数应该做的是按照堆栈顺序检查drop区域。我不知道如何检查元素的堆栈顺序，但如果您使用的浏览器符合css2规范，您可以预测它

此外，如果所有放置区域都相对定位，那么检查每个元素的z索引以及它们的声明顺序就足够了。如果使用负边距或其他方法在页面上堆叠元素，则必须阅读css2堆叠规范。

但是，如果您事先知道可拖放区域，并且它们没有更改，则可以按照它们对应的堆栈顺序初始化可拖放区域。在您的示例中，这将是：

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

“drop”不是真正的javascript事件。jQuery所做的是按照定义的顺序循环所有可拖放元素，并返回与被拖放元素的坐标匹配的第一个元素。也许您可以为此定义自己的函数。drop函数应该做的是按照堆栈顺序检查drop区域。我不知道如何检查元素的堆栈顺序，但如果您使用的浏览器符合css2规范，您可以预测它

此外，如果所有放置区域都相对定位，那么检查每个元素的z索引以及它们的声明顺序就足够了。如果使用负边距或其他方法在页面上堆叠元素，则必须阅读css2堆叠规范。

但是，如果您事先知道可拖放区域，并且它们没有更改，则可以按照它们对应的堆栈顺序初始化可拖放区域。在您的示例中，这将是：

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