javascript鼠标跟随 jquery跟随鼠标移动

转载

mob6454cc613c41 2023-06-08 21:53:12

文章标签 javascript鼠标跟随 css 拖拽 javascript 文章分类 JavaScript 前端开发

<script type="text/javascript">
            $(".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挂事件
                e.preventDefault()
                $(".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元素：