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

最新推荐文章于 2024-06-13 15:49:37 发布

OrdnAry

最新推荐文章于 2024-06-13 15:49:37 发布

阅读量153

点赞数

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

本文链接：https://blog.csdn.net/OrdnAry/article/details/108168428

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!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>

在这里插入图片描述

OrdnAry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖拽div快在页面上移动

<!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;paddin
复制链接

扫一扫