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

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

---

更新：演示显示了远离 body 元素的“遏制” - 正如@Mathias 指出的那样，body 上的“溢出隐藏”并不意味着您不能“拖动”给它。因此，包装远离这些的元素可以解决这个问题。