JS实现拖拽不出浏览器距边50px吸附_div 移动到浏览器边缘吸附-CSDN博客

本文链接：https://blog.csdn.net/qq_35254240/article/details/98351584

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        div
        {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
             var div=document.querySelector("div");
            div.addEventListener("mousedown",mouseMoveHandler);
            var browerWidth = document.body.clientWidth ;
            var browerHeight =document.body.clientHeight ;
 
        function mouseMoveHandler(e) {
            if(e.type==="mousedown"){
                e.preventDefault();
                document.point={
                    x:e.offsetX,
                    y:e.offsetY
                };
                document.div=this;
                document.addEventListener("mousemove",mouseMoveHandler);
                document.addEventListener("mouseup",mouseMoveHandler);

            }else if(e.type==="mousemove"){

                this.div.style.top=e.clientY-this.point.y+"px";
                this.div.style.left=e.clientX-this.point.x+"px";

                if(this.div.offsetLeft<0){
                    this.div.style.left=0+"px";
                }
                if(this.div.offsetTop<0){
                    this.div.style.top=0+"px";
                }
                if(this.div.offsetTop+this.div.clientHeight>browerHeight){
                    this.div.style.top=browerHeight-this.div.clientHeight+"px";
                }
                if(this.div.offsetLeft+this.div.clientWidth>browerWidth){
                    this.div.style.left=browerWidth-this.div.clientWidth+"px";
                }
                 
               
            }else if(e.type==="mouseup"){
         

                // if(e.clientY-this.point.y<50 && e.clientX-this.point.x<50){
                //     this.div.style.left=0+"px";
                //     this.div.style.top=0+"px";
                // }
                
                if(e.clientX-this.point.x<50){
                    this.div.style.left=0+"px";
                }

                if(e.clientY-this.point.y<50){
                    this.div.style.top=0+"px";
                }

                if(browerHeight-this.div.offsetTop-this.div.clientHeight<50){
                    this.div.style.top=browerHeight-this.div.clientHeight+"px";
                }

                if(this.div.offsetLeft+this.div.clientWidth>browerWidth-50){
                    this.div.style.left=browerWidth-this.div.clientWidth+"px";
                }

                //松手移除事件
                this.removeEventListener("mousemove",mouseMoveHandler);
                this.removeEventListener("mouseup",mouseMoveHandler);
            }
        }
 
    </script>
</body>
</html>