javascript - jQuery UI Draggable 设置没有包含属性的拖动长度
问题描述
我有一个没有任何父元素的 div,我希望可拖动的 DIV 拖动到顶部和底部,但不是一直拖动。我已经完成了使用,
drag: function (event, ui) {
if(ui.position.top < 50)
ui.position.top = 50;
},
但是,我想不出一种方法来做到这一点。当元素被拖到底部时,我需要防止它从某个位置拖动。
HTML
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
jQuery
$( "#draggable" ).draggable({
axis: 'y',
containment: 'window',
scroll: false,
cancel: false,
drag: function (event, ui) {
if(ui.position.top < 50)
ui.position.top = 50;
},
});
解决方案
您需要父/容器的高度来计算底部偏移量:
$("#draggable").draggable({
axis: 'y',
containment: 'window',
scroll: false,
cancel: false,
drag: function (event, ui) {
var offset = 50;
var maxHeight = (window.innerHeight - this.offsetHeight - offset);
if (ui.position.top < offset) {
ui.position.top = offset;
return false;
}
else if (ui.position.top > maxHeight) {
ui.position.top = maxHeight;
return false;
}
}
});
false
当拖动效果超出边界时,可能需要返回以取消或基本上“释放”拖动效果。
这是您对上述更改的修改:
$("#draggable").draggable({
axis: 'y',
containment: 'window',
scroll: false,
cancel: false,
drag: function(event, ui) {
var offset = 50;
var maxHeight = (window.innerHeight - this.offsetHeight - offset);
if (ui.position.top < offset) {
ui.position.top = offset;
//return false;
}
else if (ui.position.top > maxHeight) {
ui.position.top = maxHeight;
//turn false;
}
},
});
html {
overflow: hidden;
}
.ui-widget-content {
width: 100%;
padding: 15px;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
推荐阅读
- sql - 在最后一个数据点之后的列的下一行中添加 0
- javascript - 如何在 Nodejs VM 中提供源映射
- r - R中网格上的高效蒙特卡罗模拟
- java - 如何使用应用程序在 iOS 应用程序中自动执行长按操作?
- amazon-web-services - 在 AWS CloudFormation 中构造参数
- javascript - Firebase ID 令牌在一小时内到期
- pytorch - Pytorch Transformer 模块中 MultiheadAttention 中“heads”的定义
- swift - Swift CLI - $PATH 不完整
- javascript - 加载模块脚本失败:服务器以“text/plain”的非 JavaScript MIME 类型响应。对模块执行严格的 MIME 类型检查
- c++ - Android NDK - 符号 __sfp 和 __sflag 与 64 位不兼容