3

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

我的页面上有一些可放置的元素（jQueryUI），当它们被拖过时会显示悬停类。但是，我有一些隐藏元素有时会在拖动过程中显示出来，然后不会像应有的那样用它们的 hoverClass 响应。

我在这里有一个 jsFiddle来显示这种情况，但是，如果您继续拖动 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();
    }
});

有什么我可以改变以使其正常工作的吗？

4

1 回答 1

14

我猜想 jQuery UI 有一个 bug 可以处理可放置的隐藏元素。一种解决方法可能是使用不透明度：

HTML

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

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/

于 2013-03-11T16:11:39.657 回答