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上时，它的dropover事件不会像它应该那样被触发。只有在掉落可拖动物品然后再次拾起它时才会起作用。 drop事件已经在第一次尝试时起作用了。

任何想法导致了什么？我认为这可能是一个错误？

Answer 1

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

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

来自draggable选项的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.

jQuery UI dropover并不总是被触发

1 个答案: