停止 jQuery 可拖动从屏幕滚动

Question

当在 div 元素上使用可拖动的 jQuery UI 时，您可以将元素从页面右侧“拖出”，但页面将简单地扩展并随元素自动滚动。这是有问题的，因为我试图在元素到达窗口右侧时启动一个事件。一个警告是，我不能简单地绑定 div 使其无法离开，因为我希望在光标遇到边缘而不是 div 时停止拖动（尝试将其从左侧拖动以了解我的意思，我只是想要在右侧复制）。

我的尝试：

body{ overflow: hidden;} - 乍一看是可行的，但如果你仔细检查，身体实际上是在滚动，只是没有可见的滚动条。另外，这是在插件中使用的，所以我不能限制用户只溢出：隐藏的身体。

创建窗口大小/固定位置的包装 div 以触发事件，但主体仍然在固定 div 下方延伸。

我只需要一种方式来说明如果我正在拖动一个元素，请不要滚动窗口。

这是一个允许拖动但离开窗口的 jsFiddle： http://jsfiddle.net/9dx1cxu8/

html:
<div class="box"></div>

javascript (jQueryUi):
$('.box').draggable();

css:
.box{
  left:200px;
  top:200px;
  width: 150px;
  height: 150px;
  box-shadow: inset 0 0 20px
}

Answer 1

请使用此代码：

$( ".box" ).draggable({ containment: "#containment-wrapper", scroll: false })

DEMO