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均用的是老师提供的，未修改。

一共四个BUG，三个有图，第四个是点击状态LI，状态栏内容不变。