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>