我有一个可拖动的 div 元素。我希望它只能在屏幕范围内拖动,但现在任何人都可以将它拖出边界。
我的可拖动 div 元素:
$("#stayaway").draggable()
我在网上搜索到了这行代码。它应该可以防止滚动。
$("body").css("overflow", "hidden")
它的作用只是隐藏滚动条,但你仍然可以将div拖出窗口大小范围。
我有一个可拖动的 div 元素。我希望它只能在屏幕范围内拖动,但现在任何人都可以将它拖出边界。
我的可拖动 div 元素:
$("#stayaway").draggable()
$("body").css("overflow", "hidden")
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>
Containment
!$("#stayaway").draggable({containment: "window"})
选择器: 可拖动的元素将被限制在第一个符合选择器条件的元素的边界框内。如果没有找到这样的元素,则不会设置任何限制。
查看此示例(你可以将其更改为500 x 500的正方形)
$(“#stayaway”).draggable({containment:“window”})
以确保其仍在内部。 - Asken