Координаты обнаружения событий не обновляются, если происходит переход при перетаскивании

Question

Обнаружена интересная проблема, с которой я не могу пошатнуться.

Я пытаюсь перетащить ящик в div с возможностью удаления, который переходит с его родителем при запуске draggin.

Последовательность событий:

1. Начало перетаскивания
2. Draw задвигает от нижней части экрана, содержащего целевой элемент перетаскивания
3. Пользователь перемещает уронить перетаскиваемые на сбрасываемой
4. За пожаров событий
5. Пользовательские капли перетаскиваются

Однако большая часть этого прекрасна. Я обнаружил, что событие Over для droppable , похоже, не срабатывает, если переход происходит, пока пользователь перетаскивает.

Немного расследований показало мне, что огонь срабатывает, но только если перетаскиваемый перетащил по перепадам pre transition.

Если переход происходит без перетаскивания пользователя, все работает так, как ожидалось.

Я сделал макет вопрос здесь:

http://codepen.io/anon/pen/qRRPWv?editors=1111

Вот в ЯШ:

$(".ui-draggable").draggable({ 
    helper:"clone", 
    containment:"window", 
    start:function(){ 
    $(".holdingbox").css("bottom", 0); 
    }, 
    stop:function(){ 
    $(".holdingbox").css("bottom", "-200px"); 
    up = false; 
    } 
}); 
$(".ui-droppable").droppable({ 
    over:function(){ 
    $("#status").val("OVER"); 
    }, 
    out:function(){ 
    $("#status").val("NOT OVER"); 
    } 
}); 
var up = false; 
$("#manual").on("click", function(){ 
    $(".holdingbox").css("bottom", up? "-200px" : 0); 
    up = !up; 
}) 
$("#status").val("NOT OVER"); 

и HTML:

<input type="text" id="status"/> 
<a href="#" id="manual">MANUAL TRIGGER</a> 
<div class="droppable ui-draggable" style="background-color:green"> 
</div> 

<div class="holdingbox"> 
    <span style="width:100%; text-align:center; display:inline-block; margin-top: 50px;"> 
    <span> 
    <div class="droppable ui-droppable"> 
     </div> 
     </span> 

    </span> 
</div> 

И для тех, кто кто заботится, CSS

.holdingbox{ 
    position:fixed; 
    bottom:-200px; 
    left:0px; 
    width:100%; 
    height:200px; 
    background-color:#dbeef8; 
    transition: bottom 0.2s ease-Out 
} 

.droppable{ 
    width:100px; 
    height:50px; 
    background-color:#ecff09; 
    position:relative; 
    text-align:center; 
    display:inline-block; 
} 

В этот момент я был бы очень рад за обходной

Answer 1

Нашел:

$("draggable Element").draggable({ refreshPositions: true }); 

Из перемещаемых Документов Jquery UI для варианта refreshPositions:

If set to true, all droppable positions are calculated on every mousemove. 
Caution: This solves issues on highly dynamic pages, but dramatically decreases performance. 

я провел так долго на этом ...