Took all day to find a way to have a draggable object detect if its been moved outside of a valid droppable object and then go home:
<!doctype html>
<html lang="en">
<head>
<title>drag and drop</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.dragbox { width: 50px; height: 25px; border-top: 1px solid white; }
#d1 { background: red; }
#d2 { background: orange; }
#d3 { background: yellow; }
#d4 { background: green; }
#d5 { background: blue; }
#d6 { background: indigo; }
#d7 { background: violet; }
#dropbox { width: 200px; height: 200px; border: 1px solid black; }
</style>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
  $('#dropbox').droppable();
  $(".dragbox").each( function( index ) {
     $( this ).draggable({
       revert: function( valid ) {
         if ( ! valid ) {
           $( this ).animate( {top: 0, left: 0}, 'slow' );
	 };
       }
     });
   });
  }
</script>
</head>
<body>
Drag into "drop here", then drag outside and colors will go home.
<table><tr>
  <td><ul style="list-style: none;">
     <li><div class="dragbox" id="d1">red</div></li>
     <li><div class="dragbox" id="d2">orange</div></li>
     <li><div class="dragbox" id="d3">yellow</div></li>
     <li><div class="dragbox" id="d4">green</div></li>
     <li><div class="dragbox" id="d5">blue</div></li>
     <li><div class="dragbox" id="d6">indigo</div></li>
     <li><div class="dragbox" id="d7">violet</div></li>
  </ul></td>
  <td><div id="dropbox">drop here</div></td>
</tr></table>
</body>
</html>