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

Question

我正在使用 JQueryUI，并且我有 2 个 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"));
  }

我希望当我丢下红色的东西时 return "div2" 发出警报 div 但实际上 returns "div1" 然后 "div2"

感谢您的帮助

Answer 1

因为蓝色 div 与红色 div 重叠，所以他们都收到了你的掉落物。

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

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

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

How to get the right div with this JQueryUI droppable code?

html

javascript

css

jquery

jquery-ui