3

タイトルがわかりにくいですが、問題は簡単に再現できます。

ページにドロップ可能な要素 (jQueryUI) がいくつかあり、それらがドラッグされているときに hoverClass が表示されます。ただし、ドラッグ中に表示されることがある非表示の要素がいくつかあり、必要に応じて 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 には、ドロップ可能な隠し要素を操作するバグがあると思います。回避策は、不透明度を操作することです。

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 に答える