鼠标拖拽div快在页面上移动

最新推荐文章于 2025-01-31 09:00:41 发布

OrdnAry

最新推荐文章于 2025-01-31 09:00:41 发布

阅读量189

点赞数

分类专栏：学习文章标签： js css html

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/108168428

版权

学习专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的拖拽功能，允许用户在网页上自由移动一个红色的DIV元素，同时通过限制避免元素移出浏览器窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{margin:0;padding:0;}
        div{width:100px;height:100px;position:absolute;background-color: red;}
    </style>
    <script>
        window.onload = function (){
            var div = document.getElementById("div"); //找到div

            div.onmousedown  = function (ev){  //鼠标按下div时
                var e = ev||window.event; 
                var l = e.clientX - div.offsetLeft; //鼠标按下时 距离div快内部的横向距离
                    // console.log(l);
                var t =e.clientY - div.offsetTop;   //鼠标按下时 距离div快内部的纵向距离  

                document.onmousemove = function(ev){ 
                     //鼠标在页面移动时  因为鼠标要和div快相对静止所以是在页面上移动
                     var e = ev||window.event;  
                     var left = e.clientX - l;  //方块div距离左边的距离
                     var top = e.clientY - t;   //方块div距离上边的距离
                     //限制出界
                     var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;  //获取页面宽度

                    if(left <= 0){
                         left = 0;
                     }
                    if(left >= windowWidth - div.offsetWidth){
                        left =windowWidth - div.offsetWidth;
                     }
                     var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//获取页面高度
                     if(top <= 0){
                            top = 0;
                        }
                    if(top >= windowHeight - div.offsetHeight){
                        top =windowHeight - div.offsetHeight;
                     }
                                     
                    div.style.left = left + "px";
                    div.style.top = top + "px";
                }
                document.onmouseup = function(){
                    document.onmousemove = null; //鼠标抬起时 把移动事件为空
                }
            }
        }
    </script>
</head>
<body>
    <div id="div"></div>
</body>
</html>