javascriptjqueryjquery-uijquery-ui-draggable

jQuery UI dropover not always fired

I have a page with two DIVs, both of which are droppable. One of them (#droppable2) is initially hidden and is only shown when I hover the draggable item over the first DIV #droppable (with the dropover event). Example see here: http://codepen.io/anon/pen/AdLJr

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="droppable">Drop here 1</div>
<div id="droppable2" style="top: 300px; display: none;">Drop here 2</div>
<div id="draggable">Drag me</div>
<div id="log"></div>

JS:

$( "#draggable" ).draggable();
$( "#droppable,#droppable2" ).droppable({
drop: function() {
    $('#log').html($('#log').html() + '<br>DROP');
},
over: function() {
    $('#log').html($('#log').html() + '<br>over');
    $('#droppable2').show();
}
});

However, when I now hover the draggable item over the second DIV, its dropover event is not fired like it should. Only when drop the draggable item and then pick it up again does it seem to work. The drop event already works on the first try though.

Any ideas what's causing this? I assume this might be a bug?

Solution

  • Ok here is an actual answer. Change your first JS line to this:

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

    From the jQuery UI draggable docs for the refreshPositions option:

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