JavaScript实现简单拖拽案例

最新推荐文章于 2024-08-20 16:48:16 发布

梦里yf

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量41

点赞数

本文链接：https://blog.csdn.net/m0_64717348/article/details/130271221

版权

主要功能：这里举例拖拽一个绿色背景的盒子，通过获取鼠标按下和抬起时的位置差，修改盒子定位的 top 和 left 属性值，从而实现鼠标拖动盒子移动的功能。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link href="comment.js" rel="">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 400px;
            height: 300px;
            background-color: green;
            box-shadow: 0 0 8px;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="mask">

    </div>

    <script>
        function getStyle(obj,attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
        }

        let oMask = document.querySelector(".mask");
        let startPos = {
            //为了计算移动量
            x: 0,
            y: 0,

            //为了记录初始位置，以便不会被重置
            top: 0,
            left: 0
        }
        let isDown = false;  //为计算移动距离的开关

        oMask.addEventListener("mousedown",function(e) {
            //记录鼠标按下时的鼠标位置
            startPos.x = e.clientX;
            startPos.y = e.clientY;
            //记录鼠标按下时盒子的初始位置
            startPos.top = parseInt(getStyle(oMask,"top"));
            startPos.left = parseInt(getStyle(oMask,"left"));
            isDown = true;
        },false)


        //这里监听document。如果监听oMask当鼠标移动过快时会失焦。
        document.addEventListener("mousemove",function(e) {
            if(isDown) {
                //计算移动量
                let diffX, diffY;
                diffX = e.clientX - startPos.x;
                diffY = e.clientY - startPos.y;

                let _top, _left;
                _top = startPos.top + diffY;
                _left = startPos.left + diffX;

                //限制_top 和 _left的范围
                const maxTop = window.innerHeight - oMask.offsetHeight;
                const maxLeft = window.innerWidth - oMask.offsetWidth;

                _top = Math.max(0,_top);
                _top = Math.min(maxTop,_top);
                _left = Math.max(0,_left);
                _left = Math.min(maxLeft,_left);

                //盒子移动后的位置 = 初始位置 + 鼠标移动的距离(diffX diffY)
                oMask.style.top =  _top + "px";
                oMask.style.left =  _left + "px";

                //防止鼠标以移动到窗口外时，再移进来发生的错误
                if(e.clientX<0 || e.clientY<0) {
                    isDown = false;
                }
            }
        },false)


        //鼠标抬起后“拖拽”这个事件将结束
        oMask.addEventListener("mouseup",function(e) {
            isDown = false;
        },false)
    </script>
</body>
</html>