[英]jquery ui draggable restricting div to up and down drag within containment
[英]jQuery UI Draggable set drag length without containment property
我有一个没有任何父元素的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>
考虑到div没有父级,并且要将其拖到整个文档中,应将其添加到代码中
$( "#draggable" ).draggable({
axis: 'y',
containment: 'window',
scroll: false,
cancel: false,
drag: function (event, ui) {
if(ui.position.top < 50)
ui.position.top = 50;
if(ui.position.top > $(document).height() - 50)
ui.position.top = $(document).height() - 50;
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.