JqueryUI droppable 'out' event doesn't fire

Question

I have 2 droppables and 2 draggables.

If item1 is dragged to trash1, item2 can't be dragged to trash1 it will revert back to its position.

If item1 is dragged from trash1 to trash2, trash1 should become available again and that's where it fails because the 'out' event is not firing.

Here's the code:

$(function() {
        $(".item").draggable({
                revert: 'invalid',
                cursor: 'move'
        });

        $("#items").droppable({
                drop: function( event, ui ) {
                    $("#trash").droppable( "option", "disabled", false );
                    $("#trash2").droppable( "option", "disabled", false );
                }
        });

        $("#trash").droppable({
                out: function() {
                    $( this ).droppable( "option", "disabled", false );
                    console.log('hi')
                },
                drop: function( event, ui ) {
                    $( this ).droppable( "option", "disabled", true );
                }
        });

         $("#trash2").droppable({
                out: function() {
                    $( this ).droppable( "option", "disabled", false );
                    console.log('hi')
                },
                drop: function( event, ui ) {
                    $( this ).droppable( "option", "disabled", true );
                }
        });
});

Here's the fiddle: http://jsfiddle.net/vMQVy/120/

Anyone know how to overcome this problem?

Answer 1

• The 'drop' event is fired when you drop a draggable object in a droppable area
• The 'out' even is fired when a draggable object was over a droppable zone but leaves this droppable zone without having been dropped. It is the contrary event of "over".

So in your example, using 'out' event is not what you have to do to achieve that.

As far as I know, you cannot know where was the draggable object from before being dropped in a droppable area.

A solution I used is to store the position of an item each time you drop it in a droppable area. Like that, each time an item is dropped, you check if it was in another trash before, if it was then you re-enable this other trash.