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

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 });

演示版

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

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

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

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