JQuery Drag 可以通过自动滚动拖过 Containment 元素
当我注意到当窗口太小并且有滚动条时我可以拖出包含元素时，我一直在玩 JQuery 的拖放操作。基本上使用下面的代码，您可以做的就是缩小窗口，直到有垂直滚动条；然后向下拖动内部 div，直到它超过外部 div。
任何人都知道解决方法或在其他地方遇到过这个问题（也许我做错了）？目前我只是禁用滚动选项，但我希望它能够滚动。
<html>
<head>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
$(".draggable").draggable("option", "containment", ".parentdraggable");
});
</script>
</head>
<body>
<div class="parentdraggable" style="border:1px solid black;min-width:400px;min-height:400px;">
<div class="draggable" style="border:1px solid black">Hi</div>
</div>
</body>
</html>
I've been playing around with JQuery's drag and drop when i noticed I can drag out of the containment element when the window is too small and there's a scrollbar. Basically with the below code, what you can do is make your window smaller until you have vertical scroll bars; then drag the inner div downwards until it goes past the outer div.
Anyone know a workaround or have encountered this problem elsewhere (maybe I'm doing it wrong)? Currently I just disable the scroll option, but I'd rather it be able to scroll.
<html>
<head>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
$(".draggable").draggable("option", "containment", ".parentdraggable");
});
</script>
</head>
<body>
<div class="parentdraggable" style="border:1px solid black;min-width:400px;min-height:400px;">
<div class="draggable" style="border:1px solid black">Hi</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您必须将 scroll 设置为 false。示例代码： http://jsfiddle.net/Sgoettschkes/PyyWG/
我相信这可以解决问题。
You have to set scroll to false. Sample Code: http://jsfiddle.net/Sgoettschkes/PyyWG/
I believe this solves the problem.