从滚动屏幕停止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