Question

我有一种情况，我在视口外隐藏了一个菜单。

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#menu {
    position: absolute;
    width: 100px;
    height: 100%;
    top: 0;
    right: -100px;
}

我也有一个可拖动的元素。现在，当我将拖动器向右拖动并尝试将其移动到视口外（也在右侧）时，我可以通过某种方式将视口移动到左侧来使菜单可见。查看jsfiddle 如何禁用此行为？

Answer 1

您可以使用“滚动”选项阻止页面滚动。

$( "#draggable" ).draggable({scroll: false });

<强> DEMO

它可以与containment: "parent"一起使用，以防止盒子伸出其父级。

您的代码似乎发生的事情是，当您到达角落时页面会滚动，然后在overflow: hidden设置为body时从不向后滚动。

使用scroll: false的缺点是您无法将元素拖到页面上。

文档：http://api.jqueryui.com/draggable/#option-scroll

Answer 2

您的意思是希望将其保留在containment - 例如

$( "#draggable" ).draggable({ containment: "parent" });

Like this ?

http://api.jqueryui.com/draggable/#option-containment

更新：该演示会显示“收容”＆＃39;远离身体的元素 - 正如@Mathias指出隐藏的溢出＆＃39;在身体上并不代表你不能拖延＆＃39;它。所以包裹元素远离这些解决了这个问题。

jquery-ui：在视口外拖动元素

2 个答案: