JQuery droppable out event triggers too early

Question

I am using JQuery droppable container for dropping other elements. A added hoverClass when users mouse is over the container. In this class I set new width of the container. But this new width in not considered when mouse is leaving the container. Out event is triggered as container would have old width. What is even more strange is that if I move dragging element very slowly that new width of container is considered.

I have made the fiddle example here: http://jsfiddle.net/SLGdE/709/

Tested in Chrome and FF.

How can I achieve that new width of droppable container is considered?

$(function() {
    $("#draggable").draggable({
      revert:true
    });

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

Answer 1

Add refreshPositions with value true to your draggable. Note, however, that there will be a performance hit per https://api.jqueryui.com/draggable/#option-refreshPositions. So it is likely that your workaround is a better option, but maybe this answer could help someone else.

$( "#draggable" ).draggable({
    revert:true, 
    refreshPositions: true
});

Answer 2

You need to add a class and customize it. From jQueryUi documentation:

$( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
  }
});

Answer 3

Try this http://jsfiddle.net/SLGdE/710/ :

$(function() {
$( "#draggable" ).draggable({revert:true});
$( "#droppable" ).droppable({
    tolerance: "pointer",
    hoverClass: "over",
    over:function(event, ui){
        $(this).width($(this).width());//This is the update
    },
    out:function(event, ui){
        //alert("out")        
    }
 });
});