使用带有滚动条问题的jQuery UI可拖动？

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中拖动一个元素，当这样做时滚动将无法工作(如果他在#scroll中拖动一个.foo，滚动条就不会移动，只有当用户在滚动条上用鼠标单击并移动它时，滚动条才能工作)，并且能够将它放到#to_drop。

Answer 1

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

您可以使用clone 辅助对象解决这个问题。

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

您可以在这把小提琴中测试它。

Answer 2

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