DND - DETECT DROP OUTSIDE DROPPABLE - #2

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>

CSS

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

JavaScript

$('.draggable').draggable();
$('#droppable').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){
        if($('#droppable').data('outside')==1){
            alert('Dropped outside!');
        }else{
            alert('Dropped inside!');
        }
    }
});