如果在拖动操作期间显示hoverClass，则Droppable项不显示hoverClass

我知道标题令人困惑，但问题很容易复制。

我的页面上有一些可以放置的元素（jQueryUI），并且hoverClass显示它们被拖动的时间。 但是，我有一些隐藏的元素，有时在拖动过程中显示，然后不应该响应他们的hoverClass。

我在这里有一个显示这种情况的jsFiddle，但是，如果你继续拖动div最终listItems开始显示他们的hoverClass。 但是，在我的网站上，这种情况永远不会发生…… hoverClass永远不会出现在新显示的项目上。

HTML

 
Row1
 
Row2
 
Row3MORE...
 
Row4
 
Row5
 
 
DragMe! 

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

 ... 
Row4
 
Row5
 ... 

CSS

 .hidden{ opacity: 0; } 

JS

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

演示： 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 }); 

演示： http ： //jsfiddle.net/CsXpL/9/