javascript - jQuery UI dropover 并不总是被触发

Question

我有一个包含两个 DIV 的页面，这两个 DIV 都是可删除的。其中一个 (#droppable2) 最初是隐藏的，仅当我将可拖动项目悬停在第一个 DIV #droppable 上(使用 dropover 事件)时才显示。示例请参见此处: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();
}
});

但是，当我现在将可拖动项目悬停在第二个 DIV 上时，其放置事件不会像应有的那样触发。只有当放下可拖动项目然后再次拾起它时，它才似乎起作用。不过，放置事件在第一次尝试时就已经起作用了。

你知道是什么原因造成的吗？我认为这可能是一个错误？

Answer 1

好的，这是一个实际的答案。将您的第一行 JS 更改为:

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

来自 refreshPositions 选项的 jQuery UI draggable 文档:

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