摔!!明明是按照视频一条一条写的啊..写到有bug的那个还能拖曳,然后改完之后就拖不动了...
//封装通过class获取元素的函数 function getByClass(clName,parent){ //首先把父元素取出来,如果传了父元素,那么我们希望返回的是父元素的id,如果没有传,那么父元素就是document var oParent=parent?document.getElementById(parent):document, //定义一个数组,这个数组将用来装从所有元素中取到的有改class的元素 eles=[], //取出所有元素 elements=document.getElementsByTagName('*'); for (var i = 0; i < elements.length; i++) { eles.push(elements[i]); } //返回我们取到的数组 return eles; } window.onload=drag; //整个拖曳过程分为三步 //1、确定用户点击的是log部分的区域 function drag(){ //用getByClass取到改div var oTitle=getByClass("login_logo_webqq","loginPanel")[0]; //onmousedown鼠标点击时发生 oTitle.onmousedown=fnDown; } function fnDown(event){ event=event||window.event;//兼容 //把整个面板取出来 var oDrag=document.getElementById('loginPanel'), //光标按下时光标和面板之间的距离 disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; //移动 document.onmousemove=function(event){ event=event||window.event; fnMove(event,disX.disY); }; } function fnMove(e,posX,posY){ var oDrag=document.getElementById('loginPanel'), l=e.clientX-posX, t=e.clientY-posY; oDrag.style.left=l+"px"; oDrag.style.top=t+"px"; }
可以chrom按F12查看错误信息哦~~!
for (var i = 0; i < elements.length; i++) {
if(elements[i].className == clsName){
eles.push(elements[i]);
}
}
写掉了一句!