DND - DETECT DROP OUTSIDE DROPPABLE

by bizamajig

HTML

<div class="try-container">
    <div class="draggable" style="top:25px;left:32px;">
        Drag me!
    </div>
    <div class="draggable" style="top:105px;left:62px;">
        Drag me too!
    </div>
    <div id="droppable" class="droparea" style="top:112px;right:112px;">
        To drop or not to drop?
    </div>
    <div id="droppable2" class="droparea" style="top:242px;right:242px;">
        To drop or not to drop?
    </div>
</div>

CSS

.try-container{height:700px;width:700px;position:relative;}
.draggable{height:50px;width:50px;background-color:#FF0000;position:absolute;z-index:10;}
.droparea{height:100px;width:150px;background-color:#0000FF;position:absolute;}

JavaScript

$('.draggable').draggable();

$('#droppable,#droppable2').data('outside',1).droppable({
    accept    : '.draggable',
    out        : function(){
        $(this).data('outside',1);
    },
    over    : function(){
        $(this).data('outside',0);
    }
});
$('body').droppable({
    accept    : '.draggable',
    drop    : function(event, ui){
        var outsideAll = true;
        $('.droparea').each(function(){
            if($(this).data('outside') == 0){
                outsideAll = false;
                return false;
            }
        });
        if(outsideAll){
            alert('Dropped outside!');
        }else{
            alert('Dropped inside!');
        }
    }
});