Использование jQuery UI Draggable с проблемами полосы прокрутки?

Question

У меня есть следующий HTML-код:

<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>

с этим кодом CSS:

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

и следующий код Javascript / jQuery:

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

Проблема заключается в том, что хотя элементы .foo равны draggable, их можно перетаскивать только внутри #scroll div. Есть ли способ избежать этого? (проверьте здесь для примера)

Поскольку я хотел бы, чтобы пользователь мог перетаскивать элемент из #scroll, и при этом прокрутка не будет работать (если он перетаскивает .foo внутри #scroll, полоса прокрутки выиграла не двигайтесь, полоса прокрутки должна работать только тогда, когда пользователь щелкает мышью по полосе прокрутки и перемещает ее), и может быть уронена на #to_drop.

Answer 1

Исходный элемент ограничен границами его родителя из-за стиля overflow: auto.

Вы можете обойти проблему с помощью clone помощника :

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

Вы можете проверить это в этой скрипке .

Answer 2

$( ".foo" ).draggable({ containment: 'window' });