【金秋打卡】第十六天 拖拽

第一模块：

课程名称：DOM事件探秘

章节：4-1~4-3

讲师名称：Amy

第二模块:

鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。
所以浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包含页面滚动的距离。任何能够跟着鼠标移动的东西 都要有一个前提：绝对定位。js封装getClass方法，获取class。实现随鼠标拖动，需要让窗口的坐标随着鼠标移动，鼠标的坐标保存在时间的clientX和clientY两个属性中。onmousedown鼠标按下 窗口和鼠标的位置同步；

element.style.left/top=clientX/Y+'px';
onmousemove当鼠标指针在元素内部移动时重复地触发

第三模块：

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';
}

第四模块：