如何使用此JQueryUI可投放代码获取正确的div？

Question

我正在使用JQueryUI，并且我有2个可丢弃和可调整大小的div。我的实际问题是，将我的可拖动对象放到两个div中时，它们都被添加了。当我放到最下面的那一个时，就会检测到2个div，但是...我只想检测到这个

我已经尝试了一些使用CSS属性的方法，但是并没有解决问题。

我制作了这个jsfiddle，以便您可以看到我的代码的想法。

这些是我的divs。

<div id="container">
  <div id="divDrag" class="draggable">Drag Me !</div>
  <div id="div1" class="droppable resizable1"></div>
  <div id="div2" class="droppable resizable2"></div>
</div>

这是我获取放置位置div的ID的方式。

  drop: function(event, ui){
    alert($(this).attr("id"));
  }

当我在红色div中放入某些内容时，我希望警报返回“ div2”，但实际上返回“ div1”，然后返回“ div2”

感谢您的帮助

Answer 1

由于蓝色div与红色div重叠，因此它们都可以接收您的可放置对象。

解决方案：将第二个可放置对象放到第一个可放置对象中，然后使用greedy选项确保只有一个可放置对象接收到您的可拖动对象。

请参阅：http://api.jqueryui.com/droppable/#option-greedy