使用带滚动条问题的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"
});

你可以用这个小提琴来测试它.