本章节讲述的是拖动事件。具体看下面的代码
drag.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="drag.js" type="text/javascript"></script> <link href="drag.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="div1" class="div1"> <div id="div2" class="div2"></div> <div id="div3" class="div3"></div> </div> </body> </html>
drag.css
.div1{ width:500px; height:400px; border:1px solid #eeddcc; margin:0 auto; background-color: antiquewhite; position:absolute;//我们是为了移动div1块，所以div1必须要设置成定位的，且这里一定要设置成绝对定位，如果设置成相对定位的话，会有效果差异。 } .div2{ width:300px; height:100px; margin:0 auto; background-color: red; } .div3{ width:50px; height:50px; background-color: aqua; position:absolute; top:5px; right:5px; }
drag.js
function getByCls(targetname,parentId){ var Oprent=parentId? document.getElementById(parentId):document, els=[]; var element=Oprent.getElementsByTagName("*"); for(var i= 0,l=element.length;i<l;i++){ if(element[i].className==targetname){ els.push(element[i]); } } return els; }//一般我们会设置元素的类选择器，所以我们这里自定义一个通过类选择器来获取元素的函数 window.onload=drag; function drag(){ var div1=getByCls("div2","div1")[0];//此处一定要注意，后面一定要加上[0],因为我们获取的是一个数组，我们必须获得其中的某一个来操作。 div1.onmousedown=eventdown; div1.onmouseup=eventup; } function eventup(){ document.onmousemove=null; div1.onmouseup=null; } function eventdown(event){ var div1=document.getElementById("div1"); var event=event||window.event;//这个方法是兼容event事件的 var posX=event.clientX-div1.offsetLeft; var posY=event.clientY-div1.offsetTop;//我们可以通过event.clientX, event.clientY的方式获取鼠标的位置坐标。对于div块我们可以通过object.offsetLeft获得他的左上角的X坐标，object.offsetTop获取它的左上角的Y坐标。
document.onmousemove=function(event){ var event=event||window.event; moveEvent(event,posX,posY); } } function moveEvent(event,posX,posY){ var event=event||window.event; var div1=document.getElementById("div1"); var WinWidth=document.documentElement.clientWidth||document.body.clientWidth; var WinHeight=document.documentElement.clientHeight||document.body.clientHeight;//这个方法是获取屏幕大小的方法，这处考虑到了兼容问题 var MaxW=WinWidth-div1.offsetWidth; var MaxH=WinHeight-div1.offsetHeight; var disX=event.clientX-posX; var disY=event.clientY-posY; if(disX<0){ disX=0; }else if(disX>MaxW){ disX=MaxW; } if(disY<0){ disY=0; }else if(disY>MaxH){ disY=MaxH; } div1.style.left=disX+"px";//注意此处后面一定要加"px"; div1.style.top=disY+"px"; }
总结一下，首先我们可以自定义一个通过类选择器获得元素的方法，事实上已经有函数了Object.getElementByclassName(),但是兼容性不是很好。
其次我们上述通过自定义函数获取的是一个数组，所以我们在上面后面加上了[0],这个千万不要丢呀！！！
其次我们来总结一下几种获取位置坐标，宽度的方法
首先，获取鼠标的坐标的方法:event.clientX, event.clientY;
获取div块的左上角坐标的方法：object.offsetLeft, object.offsetTop;获取div块宽，长度的方法:object.offsetWidth,object.offsetHeight;
获取屏幕大小的方法：document.documentElement.clientWidth||document.body.clientWidth, document.documentElement.clientHeight||document.body.clientHeight;
最后，如果我们想移动某个元素的话，那么这个元素一定要设置成定位的，且最好是绝对定位的。然后我们在设置它的left，top值时千万不要丢了在后面加上"px".
//我们可以通过event.clientX, event.clientY的方式获取鼠标的位置坐标。对于div块我们可以通过object.offsetLeft获得他的左上角的X坐标，object.offsetTop获取它的左上角的Y坐标。