Question

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

我的可拖动的div：

$("#stayaway").draggable()

我在网上搜索并找到了这行代码。这是为了防止滚动。

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

它只是消失了滚动条，但你可以将div拖出窗口大小。

Answer 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>

Answer 2

使用Containment !!

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

选择器：可拖动元素将包含在边界框中选择器找到的第一个元素。如果没有找到元素，没有遏制将被设定。

看看这个小提琴（你可以改成500 x 500平方）

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

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

2 个答案:

演示