Question

I have a board game with a grid. each square in the grid has a class .unitPosition which is the droppable for the units. I want to prevent more then 1 unit being at the same square so I disable droppable on drop and re-enable it on out. The problem is that the re-enabling is not working.

$(".unitPosition").droppable({
    drop: function(event, ui) {
        ui.draggable
            .detach()
            .css({top: 0,left: 0})
            .appendTo($(this));
        $(this).droppable( "option", "disabled", true );
    },
    out: function(event, ui) {
        console.log($(this).parent());
        $(this).droppable( "option", "disabled", false );
    }
});

I tried a basic version of this and it works fine http://jsfiddle.net/vMQVy/40/

UPDATE:

This is the fiddle where it is not working: http://jsfiddle.net/FbzSF/3/

Answer 1

Found the Problem:

The event out is triggerd when you hover a draggable over a droppable
and then move it away. Unfortunately not when you drag a draggable
away.

See: stackoverflow.com/questions/1469879/