Как я могу остановить распространение событий с другим родителем?

Начать жадные не запускается, когда элементы имеют разные родители, и этот элемент наложен. Как это:

<div id="one">
  <div class="icone draggable"></div>
  <div id="background" class="droppable">
    <div id="grey" class="droppable"></div>
    <div id="red" class="droppable"></div>
  </div>
</div>
<div id="two">
  <div id="yellow" class="droppable"></div>
</div>

Если я удалю сикрон из #red в #yellow (#yellow на #background), у меня есть два события (событие drop), например:

start
drop in background (<= Bad event)
drop in yellow

Но если я отменил сикрон от #yellow до #red, он работает, у меня есть только одно событие:

start
drop in red

#yellow не останавливает распространение событий, #red имеет правильную реакцию.

И если я перетаскиваю силикон в #yellow, у меня есть три события вместо одного (в моем коде orignal я могу установить положение силикона, когда я его перетаскиваю):

start
drop in background (<= Bad event)
drop in yellow (<= Bad event)
drag in yellow

См. Мой пример кода. Как остановить распространение событий в #yellow?

#red и #yellow могут быть #yellow как этот второй примерный код.

Я попробовал различные решения, предлагаемые в stackoverflow с событием over/out, которые отключили другие события с возможностью изменения. Но если я использую эти решения, я не могу отказаться от.icone к #yellow.

Спасибо.

(См. Решение здесь: http://jsbin.com/mubenaze/21/edit)