柠檬酸
7月前来过
00:00/
发布于2017-12-18 / 3628次浏览
前言：这几天在好多博主上看到了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的之间的区别。
如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。
clictWidth,不算上边框的宽度也不包括滚动条
offsetWidth,算上边框的宽度，包括滚动条
可以参考这两篇文章：
https://www.2cto.com/kf/201409/333401.html
https://www.cnblogs.com/kongxianghai/p/4192032.html
呀呀呀，这是懒人版么？？
就像浮动小人一样可以拖动……
比如说：https://www.fczbl.vip/