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样式即可。