拖动元素时如何防止页面滚动？答案

【问题标题】：How to prevent the page from scrolling when dragging an element?拖动元素时如何防止页面滚动？
【发布时间】：2016-12-29 02:42:34
【问题描述】：

我有一个可拖动的 div。我希望它只能在我的屏幕大小内拖动。但是现在任何人都可以将它拖出边界。

我的可拖动 div：

$("#stayaway").draggable()

我在网上搜索了一下，找到了这行代码。应该是为了防止滚动。

$("body").css("overflow", "hidden")

它所做的只是让滚动条消失，但无论如何你都可以将 div 拖出窗口大小。

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

使用containment option：

$("#stayaway").draggable({containment: "window"})

演示

$("#stayaway").draggable({containment: "window"})

#stayaway {
  width: 200px;
  height: 200px;
  background-color: silver;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="stayaway"></div>

【讨论】：

小一点的尺寸怎么样？如果我只想在 500px x 500px 的正方形中拖动它？
@K.Yazoglu 见the docs。您可以指定一个选择器、一个元素或一个定义边界框的数组。
@K.Yazoglu 如果您调整窗口大小并且包含元素受到影响，您将不得不再次致电$("#stayaway").draggable({containment: "window"})以确保它仍在里面。
如果你想把它拖到一个 500 x 500 的正方形里，你可以改变容器的大小。

【解决方案2】：

使用Containment!!

$("#stayaway").draggable({containment: "window"})

选择器：可拖动元素将包含在边界框内选择器找到的第一个元素。如果没有找到元素，则没有将设置收容措施。

看看这个小提琴（你可以把它改成 500 x 500 的正方形）

http://jsfiddle.net/Kpt2K/11/

【讨论】：

和我的回答有什么不同？
没有阅读您的答案，但是添加了一个不同的示例。例子越多越好。
别担心！希望我的回答有帮助