示例-鼠标拖动盒子移动案例html（定位、限界）

最新推荐文章于 2022-05-25 19:41:11 发布

Best_卡卡

最新推荐文章于 2022-05-25 19:41:11 发布

阅读量525

点赞数

分类专栏：前端文章标签： js html

本文链接：https://blog.csdn.net/weixin_43909743/article/details/115457353

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

摘要

需求：固定定位下的一个图标随鼠标拖动移动，不允许超过当前浏览器窗口边界

知识点：js的三大家族 -- offset+client
	offsetWidth: 获取元素的占位宽度：width+padding+border;
	offsetTop: 当前元素的顶部到定位父元素的距离，没有定位父元素，就是到body的距离。
	clientX：获取当前鼠标的位置，相对于屏幕。
	clientWidth : 元素的可视宽度：width+左右padding

代码

<!DOCTYPE html>
<html lang="en">

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

        #box {
            width: 50px;
            height: 50px;
            position: fixed;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <img id="box" src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg" alt="">
    <script>
        var box = document.getElementById("box");

        move(box);
        function move(obj) {
            obj.onmousedown = function (ev) {
                var ev = window.even || ev;
                // ev.clientX:可视窗口 鼠标到body的距离，box.offsetLeft：box的边框到body的距离
                var x = ev.clientX - obj.offsetLeft;//box到鼠标点击位置的水平距离
                var y = ev.clientY - obj.offsetTop;
                document.onmousemove = function (ev) {
                    var ev = window.even || ev;
                    var minleft = ev.clientX - x;
                    var mintop = ev.clientY - y;
                    if (minleft < 0) { // 左边边界
                        minleft = 0;
                    }
                    if (minleft > document.documentElement.clientWidth - obj.offsetWidth) { // 右边边界
                        minleft = document.documentElement.clientWidth - obj.offsetWidth;
                    }
                    if (mintop < 0) { // 上边界
                        mintop = 0;
                    }
                    if (mintop > document.documentElement.clientHeight - obj.offsetHeight) { // 下边界
                        mintop = document.documentElement.clientHeight - obj.offsetHeight;
                    }
                    obj.style.left = minleft + "px";
                    obj.style.top = mintop + "px";
                }
                document.onmouseup = function () { // 停止移动事件
                    document.onmousemove = null;
                }
                return false;
            }
        }



    </script>
</body>

</html>

在这里插入图片描述

链接

原生js三大家族

Best_卡卡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
示例-鼠标拖动盒子移动案例html（定位、限界）

摘要需求：固定定位下的一个图标随鼠标拖动移动，不允许超过当前浏览器窗口边界知识点：js的三大家族 -- offset+client offsetWidth: 获取元素的占位宽度：width+padding+border; offsetTop: 当前元素的顶部到定位父元素的距离，没有定位父元素，就是到body的距离。 clientX：获取当前鼠标的位置，相对于屏幕。 clientWidth : 元素的可视宽度：width+左右padding代码<!DOCTYPE html>&
复制链接

扫一扫