如何允许使用滚动条将 jQuery 可拖动项目从 div 中拖出？答案

【问题标题】：How can I allow jQuery draggable items to be dragged out of a div with a scrollbar?如何允许使用滚动条将 jQuery 可拖动项目从 div 中拖出？
【发布时间】：2012-09-11 17:17:20
【问题描述】：

这就是我想要实现的目标。在我的页面顶部是一排图像。图像行比页面宽，所以下面应该有一个滚动条。我希望能够将容器 div 中的图像拖到下面的 div 上。

我遇到的问题是，一旦初始图像位于带有滚动条的 div 中，我就无法再将其拖出该 div。当我尝试向下拖动图像时，div 只会获得一个垂直滚动条。

我该如何解决这个问题？

我目前的设置非常基本：

<div id="library">
  <div id="assets">
     <div class="assetitem"><img src="..." /></div>
     <div class="assetitem"><img src="..." /></div>
     <div class="assetitem"><img src="..." /></div>
     <div class="assetitem"><img src="..." /></div>
     <div class="assetitem"><img src="..." /></div>
  </div>
</div>

并且 css 在库 div 上设置宽度，使用 overflow-x: 滚动。 assets div 的宽度为 10000 像素，以使所有图像都适合。

可拖动对象应用于每个资产项。

当我尝试将资产项拖出库 div 时，它只会在高度上扩展并滚动。

【问题讨论】：

您是否尝试将资产项上的 scroll option 设置为 false？
对不起，我应该这么说的。是的，我已经恢复：true，滚动：false

标签： jquery jquery-ui

【解决方案1】：

使用助手可能会卡住，因为正如您所见，使用 overflow:scroll 拖动会导致 div 滚动：

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

注意：我尝试使用 appendTo 选项，但我从来没有使用溢出集。

【讨论】：