js仿百度登录页实现拖动窗口效果
在web开发中，鼠标拖拽效果非常常见，例如百度的登录页，点击登录会弹出一个窗口，并且这个窗口可以拖动；那么这样的拖拽效果如何实现呢？其实实现很简章，搞清楚他的原理就很容易了；首当其冲的，要涉及到鼠标的三个事件，分别为鼠标按下、移动、松开；在这三个事件里分别计算元素鼠标的位置即可；
复制代码
/*******
拖拽原理1：
拖拽状态=0
鼠标在元素上按下的时候{
拖拽状态=1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y=现在鼠标y-原来鼠标y+原来元素y
元素x=现在鼠标x-原来鼠标x+原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态=0
}
将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面这个原理也可以演变为：
/*******
拖拽原理2：
拖拽状态=0
鼠标在元素上按下的时候{
拖拽状态=1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
元素的偏移值X=元素的X-元素的offsetLeft
元素的偏移值Y=元素的Y-元素的offsetTop
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y=现在鼠标y-元素的偏移值X
元素x=现在鼠标x-元素的偏移值Y
}
鼠标在任何时候放开的时候{
拖拽状态=0
}
将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面两种思路其实是异曲同工，需要注意的是在移动事件里，还要处理元素边缘的位置，以防止元素被拖动的时候拖到浏览器以外的地方；直接来看代码：
代码一：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title>JS拖拽</title>
<style>
*{padding:0;margin:0;}
.box{width:100px;height:100px;background:blue;position:absolute;}
</style>
<script>
varisDown=false;
varObjLeft,ObjTop,posX,posY,obj;
window.onload=function(){
obj=document.getElementById('box');
obj.onmousedown=down;
document.onmousemove=move;
document.onmouseup=up;
}
functiondown(event){
obj.style.cursor="move";
isDown=true;
ObjLeft=obj.offsetLeft;
ObjTop=obj.offsetTop;
posX=parseInt(mousePosition(event).x);
posY=parseInt(mousePosition(event).y);
}
functionmove(event){
if(isDown==true){
varx=parseInt(mousePosition(event).x-posX+ObjLeft);
vary=parseInt(mousePosition(event).y-posY+ObjTop);
varw=document.documentElement.clientWidth-obj.offsetWidth;
varh=document.documentElement.clientHeight-obj.offsetHeight;
console.log(x+','+y);
if(x<0){
x=0
}elseif(x>w){
x=w
};
if(y<0){
y=0
}elseif(y>h){
y=h
};
obj.style.left=x+'px';
obj.style.top=y+'px';
}
}
functionup(){
isDown=false;
}
functionmousePosition(evt){
varxPos,yPos;
evt=evt||window.event;
if(evt.pageX){
xPos=evt.pageX;
yPos=evt.pageY;
}else{
xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
return{
x:xPos,
y:yPos
}
}
</script>
</head>
<body>
<divid="box"class="box"></div>
</body>
</html>
代码二：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title>JS拖拽</title>
<style>
*{padding:0;margin:0;}
.box{width:100px;height:100px;background:blue;position:absolute;}
</style>
<script>
varisDown=false;
varObjLeft,ObjTop,posX,posY,obj,offsetX,offsetY;
window.onload=function(){
obj=document.getElementById('box');
obj.onmousedown=down;
document.onmousemove=move;
document.onmouseup=up;
}
functiondown(event){
obj.style.cursor="move";
isDown=true;
ObjLeft=obj.offsetLeft;
ObjTop=obj.offsetTop;
posX=parseInt(mousePosition(event).x);
posY=parseInt(mousePosition(event).y);
offsetX=posX-ObjLeft;
offsetY=posY-ObjTop;
}
functionmove(event){
if(isDown==true){
varx=mousePosition(event).x-offsetX
vary=mousePosition(event).y-offsetY
varw=document.documentElement.clientWidth-obj.offsetWidth;
varh=document.documentElement.clientHeight-obj.offsetHeight;
console.log(x+','+y);
x=Math.min(w,Math.max(0,x));
y=Math.min(h,Math.max(0,y));
obj.style.left=x+'px';
obj.style.top=y+'px';
}
}
functionup(){
isDown=false;
}
functionmousePosition(evt){
varxPos,yPos;
evt=evt||window.event;
if(evt.pageX){
xPos=evt.pageX;
yPos=evt.pageY;
}else{
xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
return{
x:xPos,
y:yPos
}
}
</script>
</head>
<body>
<divid="box"class="box"></div>
</body>
</html>
代码一对应原理一，代码二对应原理二，效果都是一样的，只不过原理二是在原理一的基础上演变过来的，演变之后，元素拖动的边缘处理也相应的做了变化。
以上就是本文的全部内容，希望对大家的学习有所帮助。