jQuery UI droppable: resizing element on hover not working

Question

I have a jQuery UI droppable element which I would like to get bigger when a draggable is hovered over it. I have tried both using the hoverClass option and also binding to the drophover event.

Visually, both these methods work fine. However, once the draggable exits the original (smaller) boundary of the droppable, jQuery UI interprets this as a 'dropout', despite still being within the current (larger) boundary.

For example, js:

$("#dropable").droppable({
    hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});

css:

#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }

In this case, when a draggable hovers over the droppable, the droppable visually increases in size to 200px. If at this point, the draggable is moved down by 20px, I would expect it to still be hovering over the droppable. Instead, jQuery UI fires the dropout event and the droppable reverts to being 10px high.

Anyone know how to get it to behave in the way I'd expect it to?

jsFiddle example: http://jsfiddle.net/kWFb9/

Answer 1

Had the same problem, I was able to solve it by using the following options:

$("#droppable").droppable({
    hoverClass: 'hovering',
    tolerance: 'pointer'
});

$('#draggable').draggable({
    refreshPositions: true
});

Here's the working fiddle: http://jsfiddle.net/kWFb9/51/

See http://bugs.jqueryui.com/ticket/2970

Answer 2

So I made a couple tweaks to your fiddle

First I set the droppable tolerance to "touch" which will activate whenever any part of the draggable is touching it. This causes the hovering class to be applied.

Next I added an animation to resize your draggable element slightly. I wasn't sure if this was functionality you wanted or not so I put it in there anyways.

Lastly, I permanently apply the hovering class to the droppable element when the draggable element is dropped into the droppable zone. This way the droppable doesn't revert to that narrow height when there is an element in it

http://jsfiddle.net/kWFb9/2/

EDIT:

Better fiddle: http://jsfiddle.net/kWFb9/6/

I hope this helps :)

Answer 3

you could create a bigger (i.e. the size of #droppable.hovering) div without background and apply your droppable to it. Note that you didn't provide HTML but the new #drop_container should contain both divs.

JS

var dropped;
$("#droppable").droppable({
    drop: function(event, ui) {
        dropped = true;
    }
});

$('#draggable').draggable({
    start: function(event, ui) {
        $("#droppable").addClass("hovering");
        dropped = false;
    },
    stop: function(event, ui) {
        if (!dropped) {
            $("#droppable").removeClass("hovering");
        }
    }
});

CSS

#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }

Or you could try another solution with .live() or .livequery() from this article

[EDIT] I've edited my code and here is a jsfiddle: http://jsfiddle.net/94Qyc/1/

I had to use a global var, I didn't find a better way to check wether the box was dropped. If anybody has an idea, that would be great.