js 拖拽实例自由下落

最新推荐文章于 2022-04-29 17:05:26 发布

tianmeng1999

最新推荐文章于 2022-04-29 17:05:26 发布

阅读量142

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42448623/article/details/108689546

版权

JavaScript 专栏收录该内容

184 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽实例</title>
    <style>
        .div{
            position: absolute;
            left: 0;
            top: 0;
            background-color: #1aaba8;
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="div"></div>
    <script>
        // 拖拽
        // 下落前的初始速度
        // 自由下落

        const div = document.getElementsByClassName('div')[0]


        drag(div,function(cool){
            // 移动结束
            move(div,cool)
        })
        // 拖拽
        function drag(dom,call){
            // 初始位置
            let x = dom.offsetLeft
            let y = dom.offsetTop
            let isMove = false;

            let mouseX = 0
            let mouseY = 0
            
            let last = {x:0,y:0}
            let cool = {x:0,y:0}

            // 鼠标按下
            dom.onmousedown = function(e){
                clearInterval(dom.timer)
                isMove = true;

                // 鼠标初始位置
                mouseX = e.pageX - this.offsetLeft
                mouseY = e.pageY - this.offsetTop
            }

            // 鼠标放开
            dom.onmouseup = function(){
                isMove = false;
                call && call(cool)
            } 

            // 鼠标移动
            document.onmousemove = function(e){
                if(!isMove) return // 是否可移动 

                // 移动位置
                let moveX = e.pageX - mouseX
                let moveY = e.pageY - mouseY

                // 边界检测
                if(moveX <= 0) moveX = 0
                if(moveY <= 0) moveY = 0
                let top = document.documentElement.clientHeight - dom.clientHeight
                let left = document.documentElement.clientWidth - dom.clientWidth
                if(moveY >= top) moveY = top
                if(moveX >= left) moveX = left

                // 创建span  拖拽轨迹
                let span = document.createElement('span')
                span.style.position = 'absolute'
                span.style.left = moveX + 'px'
                span.style.top = moveY + 'px'
                span.style.width = '2px'
                span.style.height = '2px'
                span.style.backgroundColor = 'red'
                document.body.appendChild(span)

                // 根据轨迹计算初始速度 
                cool.x = moveX - last.x
                cool.y = moveY - last.y
                last.x = moveX
                last.y = moveY

                // 移动dom
                dom.style.left = moveX + 'px'
                dom.style.top = moveY + 'px'
            }  
            
            document.onmouseup = function(){
                // isMove = false;
                // call && call(cool)
            } 
        }
    
        // 自由下落
        function move(dom,cool){
            clearInterval(dom.timer)
            let speedX = cool.x
                speedY = cool.y 
                g = 1  // 重力加速度
                loss = .8; // 能量损耗

            dom.timer = setInterval(() => {
                // 重力
                speedY += g
                
                let moveX = speedX + dom.offsetLeft
                let moveY = speedY + dom.offsetTop

                // 边界检测 bug 贴边损耗
                let top = document.documentElement.clientHeight - dom.clientHeight
                let left = document.documentElement.clientWidth - dom.clientWidth
                if(moveY >= top){
                    speedY *= -1 // 反向反转
                    moveY = top
                    loaaHandle()
                }
                if(moveX >= left){
                    speedX *= -1 
                    moveX = left
                    // loaaHandle()
                }
                if(moveX <= 0){
                    moveX = 0
                    speedX *= -1
                    // loaaHandle()
                }
                if(moveY <= 0){
                    moveY = 0
                    speedY *= -1
                    // loaaHandle()
                }
                
                // 触底 产生能量损耗
                function loaaHandle(){
                    speedX *= loss
                    speedY *= loss
                }

                // 停止定时器
                if(Math.abs(speedX) < .5) speedX = 0
                if(Math.abs(speedY) < .5) speedY = 0
                if(speedX === 0 && speedY === 0 && dom.offsetTop === moveY){
                    // console.log('清楚定时器')
                    clearInterval(dom.timer)
                }
                console.log(speedY)
                dom.style.left = moveX + 'px'
                dom.style.top = moveY + 'px'
            }, 30);
        }
    </script>
</body>
</html>

tianmeng1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 拖拽实例自由下落

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽实例</title> <style> .div{ posi
复制链接

扫一扫