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

Question

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

我的可拖动div:

$("#stayaway").draggable()

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

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

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

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>

Answer 2

用Containment!!

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

选择器:可拖动元素将包含在选择器找到的第一个元素的边界框中.如果未找到任何元素,则不会设置包含.

看看这个小提琴(你可以改成500 x 500平方)

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