How do I prevent dragging when a button is clicked within the draggable container?

How do I prevent dragging when a button is clicked within the draggable container?

I have this: 
   
    
    
  1.      <script>
    2. 
    
  2.         $(function() {
    3. 
    
  3.             $('.draggable').draggable();
    4. 
    
  4.             $('.clickable').click(function(e) {
    5. 
    
  5.                 alert('hi!');
    6. 
    
  6.             });
    7. 
    
  7.         })
    8. 
    
  8.     </script>
    9. 
    
  9.     <div class="draggable">
    10. 
    
  10.         <a href="#" class="clickable">click</a>
    11. 
    
  11.     </div>
    12.
Right now if I click & hold on the 'click' link, then drag mouse, the draggable container is dragged.  Then when I release the mouse button, the click() happens.

This is what I want: if a user drags anywhere on the draggable, it drags.  *Except*, if the user clicks on a clickable, then it does not drag.

Is there a way to 'cancel' the drag even from the clickable element so that it doesn't propagate to the draggable container?

Thanks!