title: JQuery UI draggable: Exceed containment on one side
body: <p>I am using JQuery UI to implement resizable/draggable elements. Now I would like to define a containment for these elements that limits the resizing/dragging on exactly three(!) sides. E.g. have a look at this <a href="http://jsfiddle.net/zuul/e2yfC/5/" rel="noreferrer">JSFiddle example</a>. You can see that the contained element can only be resized/dragged inside the parent's area. </p>
  
  <p>What I would like to achieve is that the element can exceed the bottom threshold and be moved to beyond the bottom border of the parent. Nevertheless the resizing/dragging should still be limited at the top, right and left sides as is prescribed by the parent's according borders.</p>
  
  <p>So <a href="http://jsfiddle.net/e2yfC/219/" rel="noreferrer">this modification</a> is what I came up with:</p>
  
  <pre class="lang-js prettyprint-override"><code>// resizable/draggable option
  resize/drag : function(event, ui) {
      expandParent("#parentElement", "#dragElement");
  }
  
  function expandParent(parentName, childName) {
      var dragEl = $(childName);
      var dragElTop = parseInt(dragEl.css("top"), 10);
      var dragElHeight = parseInt(dragEl.css("height"), 10);
      var dragElBottom = dragElTop + dragElHeight;
      var parentEl = $(parentName);
      var parentElBottom = parseInt(parentEl.css("height"));
      if(parentElBottom &lt;= dragElBottom + 20) {
          parentEl.css("height", "+=2");
      }
  }
  </code></pre>
  
  <p>If you play around with the bottom border you notice that the parent's area is expanded if the child gets too close to the bottom border of the parent. Unfortunately this stops after 20 pixels. You then have to release the mouse button and resize/drag again to extend the area further. Do you have any idea why that is?</p>