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

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>