如何用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>