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

Question

我有一个可拖动的 div 元素。我希望它只能在屏幕范围内拖动，但现在任何人都可以将它拖出边界。

我的可拖动 div 元素：

$("#stayaway").draggable()

我在网上搜索到了这行代码。它应该可以防止滚动。

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

它的作用只是隐藏滚动条，但你仍然可以将div拖出窗口大小范围。

- K.Yazoglu

Answer 1

使用containment选项：

$("#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>

- Michał Perłakowski

---

多小的尺寸怎么样？如果我只想在一个500像素 x 500像素的正方形中拖动它呢？ - K.Yazoglu

@K.Yazoglu 请参阅文档。您可以指定一个选择器、一个元素或一个定义边界框的数组。 - Michał Perłakowski

@K.Yazoglu 如果您调整窗口大小并且包含元素受到影响，则必须再次调用$（“#stayaway”）.draggable（{containment：“window”}）以确保其仍在内部。 - Asken

如果你想在一个500x500的正方形中拖动它，你可以改变容器的大小。 - Muntasir Alam

Answer 2

使用Containment！

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

选择器: 可拖动的元素将被限制在第一个符合选择器条件的元素的边界框内。如果没有找到这样的元素，则不会设置任何限制。

查看此示例（你可以将其更改为500 x 500的正方形）

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

- Muntasir Alam

---

它与我的答案有何不同？ - Michał Perłakowski

没有看到你的回答，但是我添加了一个不同的例子。例子越多越好。 - Muntasir Alam

没问题！希望我的回答有所帮助。 - Muntasir Alam