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

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

我的可拖动div:

$("#stayaway").draggable()

我在网上进行搜索，找到了这行代码。据推测是为了防止滚动。

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

它要做的只是消失滚动条，但是您仍然可以将div拖出窗口大小。

最佳答案

使用 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>