jquery 页面div能拖拽

JQuery是一种流行的JavaScript库，它可以添加动态效果、用户交互和动态加载到您的Web页面。使用它的拖放功能，您可以轻松地实现页面中的可拖拽DIV。

$(function(){
var draggable = false;
var startX, startY, initialMouseX, initialMouseY;
//当按下鼠标时执行此函数
$('.draggable').mousedown(function(e){
draggable = true;
startX = $(this).offset().left;
startY = $(this).offset().top;
initialMouseX = e.clientX;
initialMouseY = e.clientY;
$(this).css('opacity', 0.7);
});
//当鼠标移动时执行此函数
$(document).mousemove(function(e){
if(draggable){
var currentMouseX = e.clientX;
var currentMouseY = e.clientY;
var offsetX = currentMouseX - initialMouseX;
var offsetY = currentMouseY - initialMouseY;
$(this).css({
top: offsetY + startY + 'px',
left: offsetX + startX + 'px'
});
}
});
//当松开鼠标时执行此函数
$(document).mouseup(function(){
draggable = false;
$('.draggable').css('opacity', 1);
});
});

上面的代码使我们能拖拽一个带有"draggable"类的DIV元素。mousedown事件触发时，我们记录了初始鼠标和元素位置，并将元素的透明度设置为0.7。mousemove事件触发时，我们将元素的新位置计算为当前鼠标位置与初始位置的偏移量。最后，mouseup事件将元素的透明度设置为1，释放元素的拖拽状态。

查看更多关于jquery 页面div能拖拽的详细内容...