李炎恢再讲js教程 拖拽上
讲到一个登录框,通过鼠标移动登录框到浏览器各个地方,我们现在对李炎恢的怎么想出进行分析:
问题期望是什么?
1.我们通过鼠标点击登录框,然后登录框被移动,松开鼠标,停止移动。
问题实际是什么?
1.我们拥有这个登录框的id
2.这里涉及到我们学过三个鼠标事件
要实现拖拽的流程:
1 先点下去
2 在点下物体被选中,进行move移动
3.抬起鼠标,停止移动
拖拽思路
第一步 通过dom方法获取登录的节点 var oDiv =document.getElementById('login');
第二步通过鼠标点击事件来进行拖拽流程代码编写
第一步流程 先点下去
1) 谁点下去?oDiv
2) 点下是什么事件?onmousedown
翻译成 js代码如下 oDiv.οnmοusedοwn=function(){ };
第二步流程 在点下物体被选中,进行move移动
1)点下物体是什么?oDiv
2)被选中? 通过onmousedwon 事件被选中
3)进行move移动?oDIV通过onmousemove事件来进行移动
js代码r如下:
oDiv.οnmοusedοwn=function(){
oDiv.οnmοusemοve=function(){
};
};
3)移动的距离?
我觉得求物体移动的思路如下:
1.我们可以把鼠标移动物体距离的值看做是一个变量 var e=e||window.event;
2.物体的移动是从两个方向移动,所以我们要从经x y方向获取
js代码如下:
oDiv.style.left=e.clientX+'px';
oDiv.style.top=e.clientY+'px';
4)组合我们思路
oDiv.οnmοusedοwn=function(e){
oDiv.οnmοusemοve=function(e){
var e=e||window.event; oDiv.style.left=e.clientX+'px';
oDiv.style.top=e.clientY+'px'; oDiv.style.left=e.clientX+'px';
};
};
3 .抬起鼠标,停止移动
第三步流程 抬起鼠标,停止移动
1)抬起鼠标?onmousemove事件
2)抬起之后,发生什么行为?停止移动。(也就是说oDiv.onmousemove事件没有了,所以为null,抬起鼠标的行为也消失)
用js描述如下
oDiv.οnmοuseup=function(){
oDiv.οnmοusemοve=null;
oDiv.οnmοuseup=null
}
3)组合上面所有思路
oDiv.οnmοusedοwn=function(e){
//先点下去
oDiv.οnmοusemοve=function(e){
//在点下物体被选中,进行move移动
var e=e||window.event;
oDiv.style.left=e.clientX+'px';
oDiv.style.top=e.clientY+'px';
};
//抬起鼠标,停止移动
oDiv.οnmοuseup=function(){
oDiv.οnmοusemοve=null;
oDiv.οnmοuseup=null
}
};
第三步 运行代码,出现一个问题,那就是移动登录框时,只能向下向右移动,如何解决?
因为鼠标点下来区域应该是在登录框的范围内,而移动和松开鼠标是整个浏览器的页面所以只需要onmousemove和onmouseup。
js代码如下:
oDiv.οnmοusedοwn=function(e){
//先点下去
document.οnmοusemοve=function(e){
//在点下物体被选中,进行move移动
var e=e||window.event;
oDiv.style.left=e.clientX+'px';
oDiv.style.top=e.clientY+'px';
};
//抬起鼠标,停止移动
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null
}
};
第四步 运行代码,我们在移动登录框时,鼠标点下去移动十分不灵活,那么如何解决这个问题?
我觉得思路如下:
1. 首先求出点击鼠标点击的区域与登录框的距离
x轴距离 var diffX=e.clientX-oDiv.offsetLeft;
y轴距离 var diffY=e.clientY-oDiv.offsetTop;
2.再求出登录框与body之间的距离(此为物体移动的距离,这就好比小学语文课本刻舟求剑说有个楚国人,坐船渡河时不慎把剑掉入河中,他在船上用刀刻下记号,说:“这是我的剑掉下去的地方,一会儿到岸的时候我就在这跳下去找剑。”当船停下时,他沿着记号跳入河中找剑,遍寻不获。这里他在船里的距离与他在河里移动距离都不是,船移动的距离,而船移动的距离应该是他在船里的距离与他在河边距离之差。如果是用他与河边的距离作为船移动的距离,那这个楚国人就只能在船里呆着,船要是移出去他就掉水里。)
x轴距离 oDiv.style.left =e.clientX-diffX+"px";
y轴距离 oDiv.style.top=e.clientY-diffY+'px';
3.组合思路
oDiv.οnmοusedοwn=function(e){
//先点下去
var e=e||window.event;
var diffX=e.clientX-oDiv.offsetLeft; // x轴距离
var diffY=e.clientY-oDiv.offsetTop; // y轴距离
document.οnmοusemοve=function(e){
//在点下物体被选中,进行move移动
var e=e||window.event;
oDiv.style.left =e.clientX-diffX+"px";
oDiv.style.top=e.clientY-diffY+'px';
};
//抬起鼠标,停止移动
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null
}
};