如何阻止Div移出边界Jquery draggable()?
Jquery draggable()是一个用于实现拖拽功能的插件,它可以让元素在页面中自由拖动。如果想要阻止Div移出边界,可以通过以下步骤实现:
$("#myDiv").draggable({
containment: "parent", // 设置拖拽范围为父元素
scroll: false, // 禁止拖拽时自动滚动页面
stop: function(event, ui) {
// 拖拽停止时触发的回调函数
// 在这里可以进行边界检测和修正
var parentWidth = $(this).parent().width();
var parentHeight = $(this).parent().height();
var divWidth = $(this).width();
var divHeight = $(this).height();
var left = ui.position.left;
var top = ui.position.top;
// 检测左边界
if (left < 0) {
$(this).css("left", 0);
}
// 检测右边界
if (left + divWidth > parentWidth) {
$(this).css("left", parentWidth - divWidth);
}
// 检测上边界
if (top < 0) {
$(this).css("top", 0);
}
// 检测下边界
if (top + divHeight > parentHeight) {
$(this).css("top", parentHeight - divHeight);
}
}
});
在上述代码中,我们使用containment参数指定了拖拽范围为父元素,即Div不能移出其父元素的边界。同时,我们禁止了拖拽时自动滚动页面的功能,以避免出现滚动条。
在stop回调函数中,我们进行了边界检测和修正。首先,获取父元素和Div的宽度、高度以及当前的left和top值。然后,通过比较这些值,将Div的位置修正到边界内部。
这样,当拖拽的Div触碰到边界时,它将停止在边界位置,不会继续移出边界。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云