Jquery UI - Allow droppable to have blockable div

Question

I am unsure how to achieve what I am trying to do. I set up an example here:

http://jsfiddle.net/zs6US/

$('.draggable').draggable({
    revert: 'invalid'
});
$('#droppable').droppable({
    accept: '.draggable'
});

The green box is a valid droppable. The red box is not. If the draggable is dropped on the red, even the red that is over top of the green, I want it to be invalid and revert. In the example this is not working.

Is this achievable? I have combed over the API and through other questions and have not been able to find an answer.

Answer 1

Just add both elements to the droppable types, and then check the element it had been dropped on. If it is block then revert.

http://jsfiddle.net/zs6US/12/

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: "invalid"});
        }
    }
});