Question

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

我有一种情况，一个项目在多个重叠目标上掉落。问题是当它发生时只调用一个drop handler。如果代码如下：

$(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>");
}

我只会在结果div中看到“draggable ON droppable1”。（有什么好处：#droppable3位于顶部）。

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

Answer 1

我个人认为jQuery拖放功能不完整。看看这个jQuery扩展，它可以让你完全按照自己的意愿行事。此链接上有一个演示，它可以完全满足您的需求。

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

Answer 2

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

另外，如果所有的放置区都相对定位，那么就足以检查每个元素的z-index和声明它们的顺序。如果您使用负边距或其他方法来堆叠页面上的元素，则必须阅读css2堆叠规范。 http://www.w3.org/TR/CSS2/zindex.html

但是，如果您提前了解可放置区域并且它们没有更改，则可以按相应堆栈顺序的顺序初始化可放置区域。在您的示例中：

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

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

2 个答案: