Question

I have the following HTML code:

<div id="scroll"> 
  <div class="foo">foo1</div>
  <div class="foo">foo2</div>
  ....
  <div class="foo">foo8</div>
</div>

<div id="to_drop">
  DROP HERE!!!
</div>

with this CSS code:

  #scroll
  {
    width: 100px;
    height: 80px;
    overflow: auto;
  }

and I the following Javascript/jQuery code:

  $(document).ready(function ()
  {
    $('.foo').draggable();
  });

The problem is that although .foo elements are draggable, they can only be dragged inside the #scroll div. Is there a way to avoid this? (check here for an example)

Because I would like for a user to be able to drag an element from the #scroll and when doing so the scrolling won’t work (if he is dragging a .foo inside the #scroll, 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 #to_drop.

Answer 1

The original element is limited to the bounds of its parent because of the overflow: auto style.

You can work around the problem with a clone helper:

$('.foo').draggable({
    helper: "clone"
});

You can test it in this fiddle.