jquery - 使用带有滚动条问题的 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 中拖动一个元素并且在这样做时滚动将不起作用(如果他在 .foo 内拖动 #scroll，滚动条将不会移动，只有当用户用他/她的鼠标在滚动条上单击并移动它时，滚动条才会起作用), 并能够将其放置在 #to_drop .

Answer 1

由于 overflow: auto 样式，原始元素限制在其父元素的范围内。

您可以使用克隆 解决此问题 helper :

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

可以在this fiddle中测试.