How to Detect When Draggable Hits Top or Bottom of Containment in jQuery UI

How to Detect When Draggable Hits Top or Bottom of Containment in jQuery UI

Can you please take a look at this demo and let me know how to detect when .draggable hits top and bottom of it's containment?

   
    
    
  1. $(function(){
    2. 
    
  2.  var draggableRight;
    3. 
    
  3.  var draggableWidth = $('.draggable').height();
    4. 
    
  4.  var parentWidth = $('#parent').height();
    5. 
    
  5.  $('.draggable').draggable({
    6. 
    
  6.  containment: 'parent',
    7. 
    
  7.  axis: "y",
    8. 
    
  8.  drag: function(e, ui){
    9. 
    
  9.  // ==> if .draggable hits top of parent change it's background red
    10. 
    
  10.  // $(document).trigger("mouseup");
    11. 
    
  11.  // $('.draggable').css({ background: 'red' });
    12. 
    
  12.  // ==> if .draggable hits bottom of parent change it's background blue
    13. 
    
  13.  // $(document).trigger("mouseup");
    14. 
    
  14.  // $('.draggable').css({ background: 'blue' });
    15. 
    
  15.  } 
    16. 
    
  16.  }); 
    17. 
    
  17. });
    18.