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

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        ui.draggable.data('dropped', true);
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    start: function(event, ui) {
        ui.helper.data('dropped', false);
    },
    stop: function(event, ui)
    {
        alert('stop: dropped=' + ui.helper.data('dropped'));
        // Check value of ui.helper.data('dropped') and handle accordingly...
    }
});