淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery是一款非常流行的JavaScript库,它可以方便地帮助我们实现许多交互特效。其中,鼠标按下拖动也是常见的交互效果之一。下面就来介绍一下如何使用jQuery实现鼠标按下拖动。

$(document).ready(function(){
var isMouseDown = false;   //记录鼠标是否按下的标志
var data = {};   //记录拖动数据的对象
$(".box").mousedown(function(event){
isMouseDown = true;
data.pageX = event.pageX;   //记录鼠标按下时的坐标
data.pageY = event.pageY;
data.left = parseInt($(this).css("left"));   //记录盒子的初始位置
data.top = parseInt($(this).css("top"));
});
$(document).mousemove(function(event){
if(isMouseDown){   //当鼠标按下时才进行拖动
var deltaX = event.pageX - data.pageX;   //计算鼠标位移的距离
var deltaY = event.pageY - data.pageY;
$(".box").css({
left:data.left + deltaX + "px",   //计算并设置盒子的新位置
top:data.top + deltaY + "px"
});
}
});
$(document).mouseup(function(){
isMouseDown = false;   //鼠标松开,标志清零
});
});

上面的代码实现了一个简单的拖动效果。它的原理是在鼠标按下时记录盒子的初始位置和鼠标按下时的坐标,然后在鼠标移动时计算鼠标位移的距离,从而得出盒子的新位置,最后设置盒子的CSS样式即可。