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