如果在拖動操作過程中顯示懸掛類別，則不顯示懸停類型

Question

我知道標題很混亂，但問題很容易複製。

我的頁面上有一些可拖放的元素（jQueryUI），並且hoverClass在拖動時顯示。但是，我有一些隱藏的元素，有時會在拖動過程中顯示，然後不會像他們應該那樣用他們的hoverClass響應。

我有一個jsFiddle here顯示了這種情況，但是，如果你繼續拖動div，最後listItems開始顯示他們的hoverClass。然而，在我的網站上，這絕不會發生...... hoverClass永遠不會出現在新顯示的項目上。

HTML

<ul> 
    <li>Row1</li> 
    <li>Row2</li> 
    <li>Row3<span id="More">MORE...</span></li> 
    <li style="display: none;">Row4</li> 
    <li style="display: none;">Row5</li> 
</ul> 
<div id="DragMe">DragMe!</div> 

CSS

#DragMe { 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    border: 1px solid black; 
    background-color: RGBA(255,255,255,0.5); 
} 
.DragOver { 
    background-color: #000000; 
    color: #FFFFFF; 
} 
#More { 
    margin-left: 10px; 
} 

的JavaScript

$('#DragMe').draggable({ 
    cursorAt: {top: 50, left: 50} 
}); 

$('li').droppable({ 
    hoverClass: 'DragOver' 
}); 

$('#More').droppable({ 
    over: function() { 
     $('li').show(); 
    } 
}); 

有什麼我可以改變得到這個正常工作？

Answer 1

我想jQuery UI有可操作的隱藏元素可以droppables錯誤。一種解決方法可能是用不透明的工作：

HTML

... 
<li class="hidden">Row4</li> 
<li class="hidden">Row5</li> 
... 

CSS

.hidden{ 
    opacity: 0; 
} 

JS

$('#More').droppable({ 
    over: function() { 
     $('li.hidden').removeClass('hidden'); 
    } 
}); 

DEMO：http://jsfiddle.net/CsXpL/2/

編輯

你欠我一杯冰啤酒！ Draggable有以下選項：refreshPositionsType說：

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

鏈接：http://api.jqueryui.com/draggable/#option-refreshPositions

所以，解決辦法是：

$('#DragMe').draggable({ 
    cursorAt: {top: 50, left: 50}, 
    refreshPositions: true 
}); 

DEMO：http://jsfiddle.net/CsXpL/9/