JQuery-UI жадный случайное событие сбрасывания дважды

Question

Im с использованием jquery-UI droppable, когда я перетаскиваю маленькую зеленую коробку поверх синих сверху вниз, все работает так, как я хочу, но когда я перетаскиваю ящик с бота на верхнюю часть родительского box запускает событие over и получает выделение, я хочу, чтобы только один элемент был высокопоставленным в одно и то же время, одним из братьев или родителей или родителем.

HTML:

<div class="box">Drag me</div> 

<div class="drop">Drophere 
    <div class="drop">Drophere</div> 
    <div class="drop">Drophere</div> 
    <div class="drop">Drophere</div> 
</div> 

JS:

$(".box").draggable(); 
$(".drop").droppable({ 
    accept: ".box", 
    hoverClass: "drophere", 
    greedy:true 
}); 

http://jsfiddle.net/Deivid11/44bg1bz4/4/

Answer 1

Вы можете проверить на over случае, если ребенок .drop имеет класс .drophere и если да, то удалить .drophere от родителя. Как это:

over: function (e, ui) { 
    $('.drop .drophere').parent().removeClass('drophere'); 
} 

http://jsfiddle.net/p1wjk56h/1/