如何用jQuery實現div隨鼠標移動而移動?(詳解)----2017-05-12


重點是弄清楚如何獲取鼠標現位置與移動后位置,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>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM