function?getclsname(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.onload=drag;

function?drag(){
	var?otitle=getclsname("login_logo_webqq","loginPanel")[0],
	????oclose=document.getElementById("ui_boxyClose"),
	????odiv=document.getElementById("loginPanel"),
	????online=document.getElementById("loginState"),
	????loginStatePanel=document.getElementById("loginStatePanel"),
	????lis=loginStatePanel.getElementsByTagName("li"),
	????loginStateShow=document.getElementById("loginStateShow","loginState")[0],
	????loginstatetxt=getclsname("login-state-txt");
	????
	otitle.onmousedown=fnDown;
	
	oclose.onmousedown=function(){
		odiv.style.display="none";
	}
	
	online.onclick=function(event){
		event=event||window.event;
		if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble=true;}
		loginStatePanel.style.display="block";
	}
	
	for(var?i=0,l=lis.length;i<l;i++){
		lis[i].onmousemove=function(){
			this.style.backgroundColor="#567";
		}
		lis[i].onmouseout=function(){
			this.style.backgroundColor="white";
		}
		lis[i].onclick=function(event){
			event=event||window.event;
			if(event.stopPropagation){
				event.stopPropagation();
			}else{event.cancelBubble=true;}
			var?id=this.id;//divs=this.getElementsByTagName("div"),
				
			loginStatePanel.style.display="none";
			loginstatetxt.innerHTML=this.childNodes[1].innerHTML;
			loginStateShow.className='';
????????	loginStateShow.className='login-state-show?'+id;
		}
	}
	document.onclick=function(){

		loginStatePanel.style.display="none";
	}
	
}
function?fnDown(evnet){
	event=event||window.event;
	
	var?odiv=document.getElementById("loginPanel");
	var?disx=event.clientX-odiv.offsetLeft,
		disy=event.clientY-odiv.offsetTop;
		
	document.onmousemove=function(event){
		event=event||window.event;
		var?x=event.clientX-disx,
			y=event.clientY-disy,
			outx=document.clientWidth-odiv.offsetWidth-5,
		?	outy=document.clientHeight-odiv.offsetHeight-5;
		if(x<5){x=5;}
		else?if(x>outx){x=outx;}
		if(y<5){y=5;}
		else?if(y>outy){y=outy;}
		odiv.style.left=x+'px';
		odiv.style.top=y+'px';
	}
	
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}

注：HTML和CSS均用的是老師提供的，未修改。

一共四個(gè)BUG，三個(gè)有圖，第四個(gè)是點(diǎn)擊狀態(tài)LI，狀態(tài)欄內(nèi)容不變。