鼠标点击之后随着鼠标滑动移动图片

最新推荐文章于 2022-12-16 20:40:00 发布

原创最新推荐文章于 2022-12-16 20:40:00 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现拖拽图片的功能。通过监听鼠标事件，包括mousedown、mousemove和mouseup，来移动图片位置，并确保拖拽过程平滑进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var params = [];
document.onmouseup = function(){
params.flag = false;
};

$(".modal-body").on("mousedown", "img", function(e) { //在包含图片的外层div绑定鼠标点击事件
e.preventDefault();
params.flag = true;
params.currentX = e.clientX;
params.currentY = e.clientY;
if( params.left !== "auto"){
params.left = $(this).css("left");
}
if(params.top !== "auto"){
params.top = $(this).css("top");
}
})

$(".modal-body").on("mousemove", "img", function(e) { //在包含图片的外层div绑定鼠标移动事件
var nowX = e.clientX, nowY = e.clientY;
var disX = parseInt(params.left)+ nowX - params.currentX, disY = parseInt(params.top)+ nowY - params.currentY;
if(params.flag){
$(this).css({
position:"absolute",
left:disX + "px",
top:disY+ "px"
})
}

})