重點是弄清楚如何獲取鼠標現位置與移動后位置,div現在位置與移動后位置:
用jQuery實現div隨鼠標移動而移動,不是鼠標自身的位置!!而是div相對於之前位置的移動
代碼如下:(注意看綠色部分的解釋)
<!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> <title></title> <script src="../jquery-3.2.0.js"></script> <style> .aa{ height: 100px; width: 200px; position: absolute; background-color: green; } </style> </head> <body> <div class="aa"></div> </body> </html> <script> $(".aa").mousedown(function(e){ //設置移動后的默認位置 var endx=0; var endy=0;
//獲取div的初始位置,要注意的是需要轉整型,因為獲取到值帶px var left= parseInt($(".aa").css("left")); var top = parseInt($(".aa").css("top"));
//獲取鼠標按下時的坐標,區別於下面的es.pageX,es.pageY var downx=e.pageX; var downy=e.pageY; //pageY的y要大寫,必須大寫!!
// 鼠標按下時給div掛事件 $(".aa").bind("mousemove",function(es){
//es.pageX,es.pageY:獲取鼠標移動后的坐標 var endx= es.pageX-downx+left; //計算div的最終位置 var endy=es.pageY-downy+top;
//帶上單位 $(".aa").css("left",endx+"px").css("top",endy+"px") }); })
$(".aa").mouseup(function(){ //鼠標彈起時給div取消事件 $(".aa").unbind("mousemove") }) </script>
區別於下面這段代碼:(最終實現效果是div隨鼠標位置移動,具體效果想看的可以粘貼復制對比看看差距在哪)
<script> $(".aa").mousedown(function(e){ $(document).bind("mousemove",function(e){ $(".aa").css("left",e.pageX).css("top",e.pageY) }); }) $(".aa").mouseup(function(){ $(document).unbind("mousemove") }) </script>