Как получить правильный div с помощью этого кода JQueryUI?

Question

Я использую JQueryUI, и у меня есть 2 div'а, которые можно сбрасывать и изменять размер. Моя настоящая проблема заключается в том, что мои перетаскиваемые объекты добавляются в оба элемента div, когда я их сбрасываю. Когда я опускаю нижний, обнаруживаются 2 дива, но ... я просто хочу, чтобы этот был обнаружен

Я пробовал кое-что со свойствами CSS, но не решил проблему.

Я сделал это jsfiddle , чтобы вы могли увидеть идею моего кода.

Это мои дивы.

<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, куда я упал.

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

Я хочу, чтобы оповещение возвращало "div2", когда я помещаю что-то в красный div, но на самом деле оно возвращает "div1" и затем "div2"

Спасибо за вашу помощь

Answer 1

Поскольку синий div перекрывает красный div, они оба получают вашу пометку.

Решение: Поместите вторую каплю внутрь первой и затем используйте опцию greedy, чтобы убедиться, что только одна капляполучает ваш перетаскиваемый.

См .: http://api.jqueryui.com/droppable/#option-greedy