小练习--鼠标拖拽

最新推荐文章于 2022-06-22 18:59:46 发布

yzhouziqi

最新推荐文章于 2022-06-22 18:59:46 发布

阅读量672

点赞数

文章标签： js

本文链接：https://blog.csdn.net/y43991314/article/details/106488960

版权

学习过鼠标事件之后做了一个小东西–纯练习
···

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName("box")[0]; //获取元素
        var x, y; //鼠标相对与div左边，上边的偏移
        var isDrop = false; //移动状态的判断鼠标按下才能移动
        box.onmousedown = function(e) {
            var e = e || window.event; //要用event这个对象来获取鼠标的位置
            x = e.clientX - box.offsetLeft;
            y = e.clientY - box.offsetTop;
            isDrop = true; //设为true表示可以移动
        }

        document.onmousemove = function(e) {
            //是否为可移动状态                　　　　　　　　　　　 　　　　　　　
            if(isDrop) {　　　　
                var e = e || window.event;                    　　
                var moveX = e.clientX - x; //得到距离左边移动距离                    　　
                var moveY = e.clientY - y; //得到距离上边移动距离
                //可移动最大距离
                var maxX = document.documentElement.clientWidth - box.offsetWidth;
                var maxY = document.documentElement.clientHeight - box.offsetHeight;

                //范围限定  当移动的距离最小时取最大  移动的距离最大时取最小
                //范围限定方法一
                /*if(moveX < 0) {
                    moveX = 0
                } else if(moveX > maxX) {
                    moveX = maxX;
                }

                if(moveY < 0) {
                    moveY = 0;      
                } else if(moveY > maxY) {
                    moveY = maxY;
                }　*/
                //范围限定方法二　
                moveX=Math.min(maxX, Math.max(0,moveX));
                
                moveY=Math.min(maxY, Math.max(0,moveY));
                box.style.left = moveX + "px";　　
                box.style.top = moveY + "px";　　　　　　　　　　
            } else {
                return;　　　　　　　　　　
            }

        }

        document.onmouseup = function() {
            isDrop = false; //设置为false不可移动
        }
    </script>
</body>

yzhouziqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小练习--鼠标拖拽

学习过鼠标事件之后做了一个小东西–纯练习···<head> <meta charset="UTF-8"> <title></title> <style> .box { position: absolute; width: 200px; height: 200px; background: red;
复制链接

扫一扫