CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropjquery-ui-draggablejquery-ui-droppable
ESDictor
ESDictor

Reputation: 745

Droppable items not displaying hoverClass if they are shown during drag operation

I know the title is confusing, but the problem is easily reproduced.

I have some elements on my page that are droppable (jQueryUI), and the hoverClass shows when they are being dragged over. However, I have some hidden elements that are sometimes shown during the drag, and then do not respond with their hoverClass as they should.

I have a jsFiddle here that shows this happening, however, if you continue to drag the div around eventually the listItems start to show their hoverClass. However, on my site this never happens ... the hoverClass never appears on the newly shown items.

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();
    }
});

Is there something I can change to get this working correctly?

Upvotes: 3

Views: 3263

Answers (1)

iappwebdev
iappwebdev

Reputation: 5910

I guess jQuery UI has a bug working with hidden elements that are droppables. A workaround could be to work with opacity:

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/

EDIT

You owe me an ice cold beer! Draggable has following option: refreshPositionsType saying:

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

Link: http://api.jqueryui.com/draggable/#option-refreshPositions

So solution is:

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

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

Upvotes: 14

Related Questions