原生js实现拖动盒子上下左右移动

最新推荐文章于 2023-11-10 12:46:32 发布

它经不起推敲的

最新推荐文章于 2023-11-10 12:46:32 发布

阅读量1.9k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_46365130/article/details/116401439

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid gray;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .upleftbtn,
        .uprightbtn,
        .downleftbtn,
        .downrightbtn {
            width: 10px;
            height: 10px;
            border: 1px solid steelblue;
            position: absolute;
            z-index: 5;
            background: whitesmoke;
        }

        .upleftbtn {
            top: -5px;
            left: -5px;
            cursor: nw-resize;
        }

        .uprightbtn {
            top: -5px;
            right: -5px;
            cursor: ne-resize;
        }

        .downleftbtn {
            left: -5px;
            bottom: -5px;
            cursor: sw-resize;
        }

        .downrightbtn {
            right: -5px;
            bottom: -5px;
            cursor: se-resize;
        }
    </style>
    <script>
        window.onload = () => {
            let obj = {};
            let flag = false;
            let boxNode = document.getElementById('box');
            boxNode.onmousedown = function (e) {
                flag = true;
                obj.x = e.clientX - box.offsetLeft;
                obj.y = e.clientY - box.offsetTop;
            }
            boxNode.onmousemove = function (e) {
                if (flag) {
                    boxNode.style.left = parseInt(e.clientX - obj.x) + 'px';
                    boxNode.style.top = parseInt(e.clientY - obj.y) + 'px';
                }
            }
            boxNode.onmouseup = function (e) {
                flag = false;
                obj = null;
            }
        }
    </script>
</head>

<body>
    <div class="box" id="box" style="width:200px; height:200px;left:200px; top:100px;">
        <div class="upleftbtn" id="upleftbtn"></div>
        <div class="uprightbtn" id="uprightbtn"></div>
        <div class="downleftbtn" id="downleftbtn"></div>
        <div class="downrightbtn" id="downrightbtn"></div>
    </div>

</body>

</html>

总结：
onmousedown鼠标按下时计算鼠标与盒子左边框的距离；

onmousemove中通过动态计算盒子距离屏幕的left来实现拖动效果；但盒子的left值和鼠标的clientX值差了一个（鼠标与盒子左边框的距离）onmousedown中计算的距离。

它经不起推敲的

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
原生js实现拖动盒子上下左右移动

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫