$( ".bar" ).draggable({ revert: "invalid" });

$( "target.top" ).droppable({
      accept: "#red",
      drop: function( event, ui ) {
            $('#red').addClass('redhome');
      }
});

$( "target.middle" ).droppable({
      accept: "#white",
      drop: function( event, ui ) {
            $('#white').addClass('whitehome');
      }
 });

$( "target.bottom" ).droppable({
      accept: "#blue",
      drop: function( event, ui ) {      
            $('#blue').addClass('bluehome');
      }
 });


$('#reset').click( function(){ doReset(); } );
$('#hint').click(  function(){ $('greenbox').addClass('hint'); } );

function doReset(){
  $('.bar').removeClass('redhome');
  $('.bar').removeClass('whitehome');
  $('.bar').removeClass('bluehome');
  $('greenbox').removeClass('hint');
  $('#red').css('left','calc( 50% - 200px )');
  $('#red').css('top', '300px');
  $('#blue').css('left','calc( 50% - 150px )' );
  $('#blue').css('top', '350px' );
  $('#white').css('left','calc( 50% - 100px )' );
  $('#white').css('top', '400px' );
}

doReset(); // reset positions when page loads.
//could have used the syntax below for this reset. it's ugly.
//$(document).ready( function(){ doReset(); });