How to prevent stacking divs, with jQuery UI drag & drop?

Question

I'm stuck on how to prevent dropping when there is already a dropped element in a chosen position.

I have three different sized div elements and I'm dragging them onto a droppable grid. The way I have done my code (see jsFiddle below), I can't think of a way to check if there's already an item there.

Can anyone think of a way, any ideas? JSFiddle: http://jsfiddle.net/sExrV/1/

The code I think would be somewhere in the "drop" event, but I can't think of a way to test for it:

$("#grid").droppable({
    accept: (".widget1, .widget2, .widget3"),
    drop: function(event, ui) {
    // test for existing element dropped here??

Answer 1

Have you tried disabling the droppable functionality anytime something is dropped?

$("#grid").droppable({
    drop: function() { $( "#grid" ).droppable( "option", "disabled", true ); }
});