SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div id="draggable" class="ui-widget-content">
    <p>I revert when dropped outside the area</p>
</div>
<div id="draggable2" class="ui-widget-content">
    <p>I revert anywhere, I'm not accepted</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop me here</p>
</div>

CSS

#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

JavaScript

$(function() {

    $("#draggable, #draggable2").draggable({ revert: doRevert });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        accept: '#draggable',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        }
    });
    
    function doRevert(dropped) {
      var dropped = dropped && $(this).is(dropped.droppable('option', 'accept'));
      if(!dropped) alert("I'm reverting!");
      return !dropped;        
    }

});