实现拖动框效果

最新推荐文章于 2024-09-11 15:33:18 发布

zhou_nj

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量109

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zhou_nj/article/details/120247925

版权

1.在页面制作一个盒子，鼠标按下可以拖动，鼠标松开停止。代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 绝对定位 */
            position: absolute;
            left: 100px;
            top: 100px;
            cursor: move;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 获取box
        let box = document.querySelector('.box')

        // 是否可以移动
        let ismove = false

        // 给box注册鼠标按下事件
        let x = 0   //点击位置到box左边框的距离
        let y = 0   //点击位置到box上边框的距离
        box.onmousedown = function (e) {
            // 获取点击位置到浏览器视口的距离
            let {pageX,pageY} = e
            // 获取鼠标指针点击时的位置
            x = pageX - box.offsetLeft
            y = pageY - box.offsetTop
            ismove = true
        }

        // 给window注册鼠标移动事件
        window.onmousemove = function (e) {
            if (ismove) {
                // 获取鼠标指针的位置
                let { pageX, pageY } = e
                box.style.left = pageX - x + 'px'
                box.style.top = pageY - y + 'px'
            }
        }

        // 给window注册鼠标弹起事件
        window.onmouseup = function () {
            ismove = false
        }

        // 给window注册失去焦点事件
        window.onblur = function(){
            ismove = false
        }
    </script>
</body>

</html>