jQuery Draggable拖动屏幕 [英] jQuery Draggable drags off screen

问题描述

我正在开发一个基于Web的虚拟计算机训练HTML，CSS和Javascript / jQuery。

I'm working on making a Web Based Virtual Computer training thingy in HTML, CSS, and Javascript / jQuery.

目前，当用户抓住标题栏一个窗口拖动到右边一路，页面将开始向右滚动。

Currently, when the user grabs the titlebar of a window and drags to the right all the way, the page will start to scroll right. Is there anyway to prevent this?

要重现：（ http： //tomsfreelance.com/windows_virtual_security/ ）
点击链接，双击展望，然后双击标题栏。然后将标题栏向右拖动。

To reproduce: (http://tomsfreelance.com/windows_virtual_security/) Click the link, double click on outlook, and double click the title bar. Then drag the title bar to the right.

有没有办法防止这种滚动操作？我有溢出：隐藏在html和body标签。不知道在这里还要做什么。我不想在窗口上使用containment选项，因为我希望他们能够稍微滑下屏幕（像实际的Windows一样）。

Is there any way to prevent this scrolling action? I have overflow: hidden on the html and body tags. Not sure what else to do here. I'd prefer not to use the containment option on the window because I want them to be able to slide off screen slightly (like the actual Windows does).

推荐答案

当您使用 jQuery UI Draggable 时，您有一个选项遏制。在那里，你可以指定父代，它应该被约束。在你的情况下，父母应该是身体。

When you use jQuery UI Draggable, you have an option called Containment. In that, you can specify the parent, inside which it should be constrained. In your case, the parent should be the body.

您可以使用此启动功能：

You can use this initiation function:

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

这篇关于jQuery Draggable拖动屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！