如何使用此JQueryUI可放置代碼獲取正確的div？

Question

我正在使用JQueryUI，我有2個div可以droppable和resizable。 我的實際問題是，當我放下它時，我的拖動器被添加到兩個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"));
  }

我希望警報返回“div2”當我在紅色div中放棄一些東西但它實際上返回“div1”然后返回“div2”

謝謝你的幫助

Answer 1

由於藍色div與紅色div重疊，因此它們都會收到你的droppable。

解決方案：將第二個droppable放入第一個droppable中，然后使用greedy選項確保只有一個droppable正在接收您的draggable。

請參閱： http ： //api.jqueryui.com/droppable/#option-greedy