SO fiddle

Test Fiddle mainly for SO Questions

HTML

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

CSS

body { width: 100%; height: 100%; }
#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").draggable({
        revert: function(dropped) {
            var dropped = dropped && dropped[0].id == "droppable";
            if(!dropped) {
                $(this).data("draggable").originalPosition = {top:0, left:0}
                $(this).appendTo($(this).data('originalParent'))
            }
            return !dropped;
        } 
    }).each(function() {
        $(this).data('originalParent', $(this).parent())
    });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        over: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        },
        out: function(event, ui) {
            $(this).removeClass('ui-state-highlight').find('p').html('Drop me here');
        }
    });
});