拖拽小球与惯性运动-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44573096/article/details/107776302
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{
        margin: 0;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50%;
    }
    </style>
</head>
<body>
    <div></div>
    <script>
    var oDiv = document.querySelector("div");
    oDiv.onmousedown = function (){
        clearInterval(oDiv.timer);//当鼠标点击该元素时，可以让运动的小球停下来
        var disX = event.pageX - oDiv.offsetLeft;
        var disY = event.pageY - oDiv.offsetTop;
        // 当鼠标只是落下并没有移动的时候，上一帧的位置和下一帧的位置相同，上一帧的时间戳和下一帧的时间戳也相同
        var oL = event.pageX,nL = event.pageX,oT = event.pageY,nT = event.pageY,oTime = new Date().getTime(),nTime = new Date().getTime();
        var chaX,chaY,chaT,speedX,speedY;   //元素移动后，求出下一帧和上一帧之间的位置差，时间差。然后就能求出速度
        document.onmousemove = function (){
            chaX = event.pageX - oL;
            chaY = event.pageY - oT;
            chaT = new Date().getTime() - oTime;
            // 当求出位置差和时间差之后，让上一步的位置等于这一步的位置(因为小球不是只运动一步就停了)
            oL = event.pageX;
            oT = event.pageY;
            oTime = new Date().getTime();

            var newLeft = event.pageX - disX;
            var newTop = event.pageY - disY;
            oDiv.style.left = newLeft + "px";
            oDiv.style.top = newTop + "px";
        }
        document.onmouseup = function (){  //鼠标抬起的时候(即抛出去的时候)，让带有惯性的小球继续运动
            document.onmouseup = document.onmousemove = null;
            // 1ms走的距离
            speedX = chaX / chaT;
            speedY = chaY / chaT;
            oDiv.timer = setInterval(ballMove,25);  //25ms走一次，所以25ms走一次的距离就是在speedX，speedY的基础上乘以25。
            // oDiv.timer的作用：是能接住飞出去的小球。
            function ballMove(){
                // 小球会飞出页面
                // oDiv.style.left=oDiv.offsetLeft+speedX*25 +"px";  //div接下来的运动==div目前的位置+惯性运动的距离
                // oDiv.style.top=oDiv.offsetTop+speedY*25+"px";
                
                // 小球不飞出页面的办法：获取下一步的位置，判断下一步的位置即可
                var nextX = oDiv.offsetLeft + speedX*25;
                if(nextX>=document.documentElement.clientWidth-oDiv.offsetWidth){
                    nextX = document.documentElement.clientWidth-oDiv.offsetWidth;
                    speedX = -speedX;
                }else if(nextX<=0){
                    nextX = 0;
                    speedX = -speedX;    //speedX取反，让小球相反的方向运动
                }
                var nextY = oDiv.offsetTop + speedY*25;
                if(nextY>=document.documentElement.clientHeight-oDiv.offsetHeight){
                    nextY = document.documentElement.clientHeight-oDiv.offsetHeight;
                    speedY = -speedY;
                }else if(nextY<=0){
                    nextY = 0;
                    speedY = -speedY;
                }
                oDiv.style.left = nextX + "px";
                oDiv.style.top = nextY + "px";
            }
        }
    }
    // 分为三步：
    // 1.实现拖拽效果
    // 2.通过拖拽的最后一帧求出小球的速度，并在抬起鼠标的时候给它加一个循环计时器。
    // 3.给元素增加一个范围，只能在窗口里移动，一旦到达窗口的时候，把它对应的速度做一个反弹
    // 鼠标落下时关闭计时器
    </script>
</body>
</html>