title: Restrict drag only in one direction
body: <p>Using <a href="http://jqueryui.com/draggable/" rel="noreferrer">jQuery Draggable</a><br/></p>
  
  <p>How to restrict a draggable to be dragged <strong>only in one direction</strong> ? <br/>
  i.e either only top or only bottom when <code>axis: 'y'</code><br/>
  and either only left or only right when <code>axis: 'x'</code></p>
  
  <p>This means that if I want a draggable <code>(with axis set to 'y')</code> to be dragged only to <code>bottom</code>, then it should not be able to drag it to top i.e it should remain in its place when tried to drag towards top</p>
  
  <p>This is what I have tried but not working, i.e draggable is still getting dragged in upward direction</p>
  
  <pre><code>$('. draggable').draggable({
      axis: 'y',
      handle: '.top'
      drag: function( event, ui ) {
         var distance = ui.originalPosition.top - ui.position.top;
  
         // if dragged towards top
         if (distance &gt; 0) { 
             //then set it to its initial state
             $('.draggable').css({top: ui.originalPosition.top + 'px'});
         }
     }
  });
  </code></pre>