title: Using jQuery UI Draggable with scrollbar problems?
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;div id="scroll"&gt; 
    &lt;div class="foo"&gt;foo1&lt;/div&gt;
    &lt;div class="foo"&gt;foo2&lt;/div&gt;
    ....
    &lt;div class="foo"&gt;foo8&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="to_drop"&gt;
    DROP HERE!!!
  &lt;/div&gt;
  </code></pre>
  
  <p>with this CSS code:</p>
  
  <pre><code>  #scroll
    {
      width: 100px;
      height: 80px;
      overflow: auto;
    }
  </code></pre>
  
  <p>and I the following Javascript/jQuery code:</p>
  
  <pre><code>  $(document).ready(function ()
    {
      $('.foo').draggable();
    });
  </code></pre>
  
  <p>The <strong>problem</strong> is that although <code>.foo</code> elements are <code>draggable</code>, they can only be dragged inside the <code>#scroll div</code>. Is there a way to avoid this? (check <a href="http://dirib.com/blink/foo.html" rel="nofollow">here</a> for an example)</p>
  
  <p>Because I would like for a user to be able to drag an element from the <code>#scroll</code> and when doing so  the scrolling won't work (if he is dragging a <code>.foo</code> inside the <code>#scroll</code>, the scrollbar won't move, scrollbar should work only when user clicks with his/her mouse on the scrollbar and moves it), and be able to drop it at <code>#to_drop</code>.</p>