title: Setting boundary limits for a draggable object
body: <p>I have two elements: </p>
  
  <p><strong>1.</strong> A parent of fixed height, <code>overflow:hidden</code></p>
  
  <p><strong>2.</strong> Its child, of larger fixed height.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .myList {list-style:none; margin:0px; padding:1px;}
      .myList li{ height:50px;  margin:4px; padding:2px;}
      .dragPanel {height:230px; border:solid; overflow:hidden;}
  &lt;/style&gt;
  
  &lt;div class="dragPanel"&gt;
      &lt;ul class="myList"&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          ...   ....
          &lt;li&gt;8&lt;/li&gt;
          &lt;li&gt;9&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to drag the list up and down within the parent div.  I am using the jquery ui draggable plugin to achieve verticle dragging, but I am unsure how to constrain the list within the parent div.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('.dragPanel').addClass("hover");
          $('.myList').draggable({ axis: 'y' });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>How would I go about setting verticle upper and lower limits for the posistion of the list?</p>