QQ面板的拖动效果【js】

function getByClass(clsName,parent){
  var oParent=parent?document.getElementById(parent):document,
      eles=[],
      elements=oParent.getElementsByTagName('*');

  for(var i=0,l=elements.length;i<l;i++){
    if(elements[i].className==clsName){
      eles.push(elements[i]);
    }
  }
  return eles;
}

window.οnlοad=drag;

function drag(){
	var oTitle=getByClass('login_logo_webqq','loginPanel')[0];
   // 拖曳
   oTitle.οnmοusedοwn=fnDown;
   //关闭
   var oClose=document.getElementById("ui_boxyClose");
   oClose.οnclick=function(){
	   document.getElementById("loginPanel").style.display="none";
   }
   //切换状态
   var loginState=document.getElementById("loginState"),
		stateList=document.getElementById("loginStatePanel"),
		lis=stateList.getElementsByTagName("li"),
		stateTxt=document.getElementById("login2qq_state_txt");
		loginStateShow=document.getElementById("loginStateShow");
    
	loginState.οnclick=function(e){
		e=e||window.event;
		if(e.stopPropagation){
			e.stopPropagation();
		}else{
			e.cancelBubble=true;
		}
		stateList.style.display='block';
	}
	
	//鼠标滑过，离开和点击状态列表时
	for(var i=0,l=lis.length;i<l;i++){
		lis[i].οnmοuseοver=function(){
			this.style.background='#567';
		}
		lis[i].οnmοuseοut=function(){
			this.style.background='#fff';
		}
		lis[i].οnclick=function(e){
			e=event||window.event;
			if(e.stopPropagation){
				e.stopPropagation();
			}else{
				e.cancelBubble=true;
			}
			var id = this.id;
			stateList.style.display='none';
			stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
			loginStateShow.className='';
			loginStateShow.className='login_state_show '+id;
		}
	}
	document.οnclick=function(){
		stateList.style.display='none';
	}
	
}

function fnDown(event){
	event = event||window.event;
	var oDrag=document.getElementById('loginPanel'),
		//光标按下时光标和面板之间的距离
		disX=event.clientX-oDrag.offsetLeft,
		disY=event.clientY-oDrag.offsetTop;
	//移动
	document.οnmοusemοve=function(event){
		event=event||window.event;
		fnMove(event,disX,disY);
	}
	//释放鼠标
	document.οnmοuseup=function(){
		document.οnmοusemοve=null;
		document.οnmοuseup=null;
	}
}

function fnMove(e,posX,posY){
	var oDrag=document.getElementById('loginPanel'),
		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-10,
		maxH=winH-oDrag.offsetHeight;
	if(l<0){
		l=0;
	} else if(l>maxW){
		l=maxW;
	}
	if(t<0){
		t=10;
	}else if(t>maxH){
		t=maxH;
	}
	oDrag.style.left=l+'px';
	oDrag.style.top=t+'px';
}