title: jQuery Draggable containment issue, cannot drag elements outside parent div
body: <p>I have a very simple image manager, like so:</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div id="draggable-images"&gt;
          &lt;img class="images" src="image1.jpg" /&gt;
          &lt;img class="images" src="image2.jpg" /&gt;
          &lt;img class="images" src="image3.jpg" /&gt;
      &lt;/div&gt;
  
      &lt;div id="droppable-area&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And jQuery to go with it:</p>
  
  <pre><code>        $( ".images" ).draggable({ containment: "#container" });
          $( "#droppable-area" ).droppable();
  </code></pre>
  
  <p>And this is the CSS:</p>
  
  <pre><code>#draggable-images {
      overflow:scroll;
      overflow-x:hidden;
  }
  
  .images {
      z-index:10000;
  }
  </code></pre>
  
  <p>Images are draggable, but they won't come out of their parent div, no matter what the containment is set to (even tried to set it to window).</p>
  
  <p>Does anyone know how to make it work, or why it doesn't work?</p>
  
  <p>I've set z-index high to make sure that's not the issue. I also tried making <code>#draggable-images</code> div without scrollbar, it didn't work either.</p>
  
  <p>Seems to work like a charm on <a href="http://jqueryui.com/demos/draggable/#option-containment" rel="nofollow noreferrer">jQuery's site</a>, can't figure what I'm missing.</p>