title: jquery draggable - containment
body: <p>I have a little project I'm working on, and have an interesting containment issue using jquery's <code>draggable</code>:</p>
  
  <p>Basically, I have two divs - a top &amp; and a bottom. Then, I have a third div that is a .draggable({}) and can be dragged in order to resize the top and bottom div.</p>
  
  <p>-- have a look here: <a href="http://jsfiddle.net/Kpt2K/7/" rel="noreferrer">http://jsfiddle.net/Kpt2K/7/</a></p>
  
  <p>The issue is, I'm not able to contain the dragging as I would like. In the fiddle above, I put orange <code>&lt;span&gt;</code>s where I'd like the containment to begin and end.</p>
  
  <p>Interesting note: I tried doing something of the following:</p>
  
  <pre><code>$('#container').innerWrap('&lt;div id='containmentBox' /&gt;');
  
  var containerHeight = $('#container').height();
  
  $('#containmentBox').css({'height': containerHeight - 45);
  </code></pre>
  
  <p>this made the containment work for the bottom, but not the top span. So, I think I'm stuck using <code>containment: [x1,y1,x2,y2]</code>, but haven't quite grasped how to use it.</p>
  
  <p>Take a look at the fiddle, and let me know what you can come up with to constrain the draggable movement to inside the two orange spans.</p>