如何使用此 JQueryUI 可放置代码获得正确的 div？答案

【问题标题】：How to get the right div with this JQueryUI droppable code?如何使用此 JQueryUI 可放置代码获得正确的 div？
【发布时间】：2019-05-20 09:34:57
【问题描述】：

我正在使用 JQueryUI，并且我有 2 个可放置和可调整大小的 div。我的实际问题是，当我放下它们时，我的可拖动对象被添加到两个 div 中。当我放入底部的 div 时，会检测到 2 个 div，但是......我只想检测到这个

我用 CSS 属性尝试了一些东西，但我没有解决问题。

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

这些是我的 div。

<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”

感谢您的帮助

【问题讨论】：

您可以做的一件事是将红色设置为min-height: 50px; bottom: 50px，但我不知道这是否是一个合适的解决方案。
两个 div 都必须留在bottom: 0 他们是项目中的某种“页脚”，这个位置不能改变：/
蓝色 div 与红色 div 重叠是否正确？因为这就是您收到两个警报的原因，您只需同时将其放在两个警报上。
是的。红色的 div 就在蓝色的前面。我能做些什么来只得到红色的 div 或者我需要改变结构吗？
你可以试着把第二个放在第一个里面，然后使用这个选项：api.jqueryui.com/droppable/#option-greedy

标签： javascript jquery html css jquery-ui

【解决方案1】：

由于蓝色 div 与红色 div 重叠，它们都会收到您的 droppable。

解决方案：将第二个 droppable 放在第一个中，然后使用 greedy 选项确保只有一个 droppable 接收您的 draggable。

见：http://api.jqueryui.com/droppable/#option-greedy

【讨论】：