鼠标事件：
键盘事件：
//通过class获取元素，封装一个通过class获取元素的方法 //IE10以下不支持document.getElementByClass() function getByClass(className,parent){//必须的元素（前面），可选的元素 var oParent=parent?document.getElementById(parent):document,//如果有父元素传递过来，不传递父元素对象，而是传父元素上的ID；如果没传父元素就用document eles=[], elements=oParent.getElementsByTagName('*');//获取所有元素 for(var i=0,l=elements.length;i<l;i++){//遍历所有元素,可以同时初始化多个变量 if(elements[i].className==className){//等于传过来的className eles.push(elements[i]); } } return eles; } window.onload=drag; function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//数组中第一个元素;当前元素，父元素 //拖曳的操作 oTitle.onmousedown=fnDown; } //鼠标事件都是在浏览器窗口中的特定位置上发生的。 //这个位置信息保存在事件的clientX和clientY属性中 //所有浏览器都支持这两个属性 //他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。 function fnDown(event){ var oDrag=document.getElementById('loginPanel'); // document.onmousemove=function(event){//变量event接收事件对象 // event=event||window.event;//非IE 和IE浏览器对象不一样 // //document.title=event.clientX+','+event.clientY; // oDrag.style.left=event.clientX+'px'; // oDrag.style.top=event.clientY+'px'; //光标按下时光标和面板之间的距离 disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; //移动 document.onmousemove=function(event){ event=event||window.event; fnMove(event,disX,disY); } //释放 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } function fnMove(e,posX,posY){ var oDrag=document.getElementById('loginPanel'); var l=e.clientX-posX, t=e.clientY-posY, winW=document.documentElement.clientWidth || document.body.clientWidth, winH=document.documentElement.clientHeight||document.body.clientHeight, maxW=winW-oDrag.offsetWidth, maxH=winH-oDrag.offsetHeight; if(l<0){ l=0; } else if(l>maxW){ l=maxW; } if(t<0){ t=0; }else if(t>maxH){ t=maxH; } oDrag.style.left=l+'px'; oDrag.style.top=t+'px'; document.title=l; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> .login_logo_webqq{background-color: white; height: 8px; width: auto;} .loginPanel{position: absolute;width: 80px; height: 40px; background-color: blue; border:1px solid blue;border-radius: 5px;} </style> <script src="drag.js"></script> </head> <body> <div class='div'> <div class='loginPanel' id='loginPanel'> <div class='login_logo_webqq'></div> </div> </div> </body> </html>