使用带滚动条问题的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内拖动。有办法避免这种情况吗？ （查看here示例）

因为我希望用户能够从#scroll拖动一个元素，并且这样做时滚动将无法工作（如果他在{{1}内拖动.foo滚动条不会移动，只有当用户在滚动条上单击鼠标并移动它时滚动条才能工作，并且能够将其拖放到#scroll。

Answer 1

由于overflow: auto样式，原始元素仅限于其父元素的边界。

您可以使用clone helper：

解决此问题

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

您可以在this fiddle中进行测试。

Answer 2

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