从滚动屏幕停止jQuery可拖动

Question

当在div元素上使用jQuery UI draggable时，您可以将元素“拖出”在页面的右侧，但页面将只是扩展并使用元素自动滚动。 这是有问题的，因为我试图在元素到达窗口的右侧时启动事件。 一个警告是，我不能简单地绑定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