个人头像

柠檬酸

1月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

JS实现鼠标拖动div,并且不让div超出范围

发布于2017-12-18 / 1636次浏览

前言:这几天在好多博主上看到了Live2d看板娘,喜欢的不行。花了半天时间扒下来后发现自己的博客没啥空间放了。
于是就想着做一个拖动效果吧。我们实现用鼠标拖动看板娘并且让他不超过我们窗口的可视范围。

先来一段简单的点击拖动代码:

<!DOCTYPE html>
<html lang="zh-ch">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{margin:0;padding:0;box-sizing: border-box;}
    #main{
    width: 600px;
    height: 400px;
    position: relative;
    }
  #box{
    width: 150px;
    height: 150px;
    background-color: orange;
    display: inline-block;
    position: absolute;
  }
  #box:hover{
    cursor: -webkit-grab;
  }
  #box:active{
    cursor: -webkit-grabbing;
  }
    </style>
</head>
<body>
    <div id="main">
        <div id="box"></div>
    </div>
    <script>
        var box=document.getElementById('box');
        box.onmousedown=function(e){
        var x=e.offsetX;	//初始位置
        var y=e.offsetY;
            document.onmousemove=function(e){
                var Cx=e.clientX;
                var Cy=e.clientY;
                box.style.left=Cx-x+"px";
                box.style.top=Cy-y+"px";
            };
            document.onmouseup=function(e){
                document.onmousemove = null;
                document.onmouseup = null;
     	   }
        }
    </script>
</body>
</html>

这样就实现了一个简单的拖拽,现在我们来改造下,让他不能超过浏览器可视范围。

var box=document.getElementById('box');
box.onmousedown=function(e){
    var Ox=e.offsetX;	//初始位置
    var Oy=e.offsetY;
    var Ch=document.documentElement.clientHeight;
    var Cw=document.documentElement.clientWidth;
    document.onmousemove=function(e){
        var Cx=e.clientX;
        var Cy=e.clientY;
        box.style.left=Cx-Ox+"px";
        box.style.top=Cy-Oy+"px";
        if(box.offsetLeft<0){
            box.style.left=0;
        }
        else if(box.offsetLeft+box.offsetWidth>Cw){
            box.style.left=Cw-box.offsetWidth+"px";
        }
        if(box.offsetTop<0){
            box.style.top=0;
        }
        else if(box.offsetTop+box.offsetHeight>Ch){
            box.style.top=Ch-box.offsetHeight+"px";
        }
    };
    document.onmouseup=function(e){
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

这样,我们的看板娘就逃不出我们的浏览器可视范围了。

接下来,我们再来升级下。如果我们把看板娘放在了一个我们自定义的div下,那我们怎么才能限制她只能在这里面拖动呢?

我们先给父元素main添加一个1像素的边框,设置左上偏移量各为100px。

#main{
    width: 600px;
    height: 400px;
    border: 1px solid #676363;
    position: relative;
    top: 100px;
    left: 100px;
}

然后上js代码:

var box=document.getElementById('box');
var main=document.getElementById('main'); 
box.onmousedown=function(e){
    var x=e.offsetX;	//初始位置
    var y=e.offsetY;
    document.onmousemove=function(e){
        var Cx=e.clientX-main.offsetLeft;
        var Cy=e.clientY-main.offsetTop;
        box.style.left=Cx-x+"px";
        box.style.top=Cy-y+"px";          
            if(box.offsetLeft<0){  
                box.style.left=0;
            }
            else if(box.offsetLeft+box.offsetWidth>main.clientWidth){ 
        	box.style.left=main.clientWidth-box.offsetWidth+"px";
            }
            if(box.offsetTop<0){
                box.style.top=0;
            }
            else if(box.offsetTop+box.offsetHeight>main.clientHeight){
                box.style.top=main.clientHeight-box.offsetHeight+"px";
            }
        };
    document.onmouseup=function(e){
        document.onmousemove = null;
        document.onmouseup = null;
        }
}

要实现这些,要理解event对象的clientX,offsetX,screenX,pageX的区别还有scrollWidth,clientWidth,offsetWidth的之间的区别。

offsetLeft和offsetTop

如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离。
如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离。

clictWidth和offsetWidth

clictWidth,不算上边框的宽度也不包括滚动条
offsetWidth,算上边框的宽度,包括滚动条
可以参考这两篇文章:

https://www.2cto.com/kf/201409/333401.html

https://www.cnblogs.com/kongxianghai/p/4192032.html

 

喜欢 0
TAGS:  
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : JS实现鼠标拖动div,并且不让div超出范围

2 条评论

  1. summerlemon 说道: 来自 Google Chrome 51.0.2704.106 in Windows 7
    2018-01-10 17:56

    呀呀呀,这是懒人版么??

  2. 后宫学长 说道: 来自 Google Chrome 49.0.2623.221 in Windows 7
    2017-12-18 20:37

    就像浮动小人一样可以拖动……
    比如说:https://www.fczbl.vip/