以负边距居中的JQuery可拖动DIV是一种使用jQuery库实现的可拖动的DIV元素,并通过负边距的方式使其居中显示。
具体实现步骤如下:
$(document).ready(function() {
$("#draggableDiv").draggable();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var divWidth = $("#draggableDiv").width();
var divHeight = $("#draggableDiv").height();
var leftPos = (windowWidth - divWidth) / 2;
var topPos = (windowHeight - divHeight) / 2;
$("#draggableDiv").css({
"left": leftPos,
"top": topPos
});
});
在上述代码中,首先使用draggable()方法使DIV元素可拖动。然后,通过获取窗口的宽度和高度以及DIV元素的宽度和高度,计算出使DIV元素居中的左边距和上边距,并使用css()方法设置DIV元素的样式。
应用场景:
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云