window.onload=function(){
?? ??? ?var dialogInstace;
?? ??? ?//獲取元素對象
?? ??? ?function g(id){return document.getElementById(id);}
?? ??? ?//讓登錄框水平居中
?? ??? ?function center(el){
?? ??? ??? ?var clientW = document.documentElement.clientWidth;? //獲取瀏覽器的可視寬度
?? ??? ??? ?var clientH = document.documentElement.clientHeight; //獲取瀏覽器的可視高度

?? ??? ??? ?var elW = el.offsetWidth;? //獲取元素的可見寬度
?? ??? ??? ?var elH = el.offsetHeight; //獲取元素的可見高度

?? ??? ??? ?el.style.left = (clientW-elW)/2+"px"; //瀏覽器的屏幕可視寬度-元素可見寬度，除以2.把結果值賦給元素的左邊距離。注：元素相對body絕對定位。
?? ??? ??? ?el.style.top = (clientH-elH)/2+"px";
?? ??? ?}
?? ?
?? ??? ?//實例drag函數(shù)
?? ??? ?function drag(dragId,moveId){???? //dragId 允許拖拽的元素，moveId 拖拽過程中移動的元素
?? ??? ??? ?var instace = {};//實例化一個instace對象
?? ??? ??? ?instace.dragElement=g(dragId);//允許執(zhí)行拖拽操作的對象
?? ??? ??? ?instace.moveElement=g(moveId); // 拖拽時移動的元素

?? ??? ??? ?instace.mouseOffsetLeft=0; //拖拽時移動的坐標初始值為0;
?? ??? ??? ?instace.mouseOffsetTop=0;

?? ??? ??? ?instace.dragElement.addEventListener("mousedown",function(e){?? //給拖拽元素加鼠標監(jiān)聽事件，mousedown
?? ??? ??? ??? ?var e=e || window.event; //兼容取得事件對象
?? ??? ??? ??? ?dialogInstace = instace; //???
?? ??? ??? ??? ?instace.mouseOffsetLeft=e.pageX-instace.moveElement.offsetWidth; //點擊位置相對整個頁面的坐標x-移動元素點擊位置的寬
?? ??? ??? ??? ?instace.mouseOffsetTop=e.pageY-instace.moveElement.offsetHeight;

?? ??? ??? ?})
?? ??? ??? ?return instace;
?? ??? ?}
?? ??? ?//鼠標彈起事件
?? ??? ?document.onmouseup=function(e){
?? ??? ??? ?dialogInstace=false;
?? ??? ?}
?? ??? ?//鼠標移動事件
?? ??? ?document.onmousemove=function(e){
?? ??? ??? ?var e=e || window.event;
?? ??? ??? ?var instace = dialogInstace;
?? ??? ??? ?if(instace){
?? ??? ??? ??? ?var maxX=document.documentElement.clientWidth-instace.moveElement.offsetWidth; //x最大的位置，即在屏幕最右邊的時候
?? ??? ??? ??? ?var maxY=document.documentElement.clientHeight-instace.moveElement.offsetHeight;//y最大的位置，即在屏幕最下邊的時候

?? ??? ??? ??? ?instace.moveElement.style.left=Math.min(Math.max((e.pageX-instace.mouseOffsetLeft),0),maxX)+"px";//當移動元素超過屏幕區(qū)域最右邊時，取右邊最大的位置
?? ??? ??? ??? ?instace.moveElement.style.top= Math.min(Math.max((e.pageY-instace.mouseOffsetTop),0),maxY)+"px";//當移動元素超過屏幕區(qū)域最下邊時，取下邊最遠的位置
?? ??? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?drag("dragtitle","dragbox");//執(zhí)行拖拽
?? ??? ?
?? ??? ?function showDragon(){
?? ??? ??? ?g("dragbox").style.display="block";
?? ??? ??? ?g("mask").style.display="block";
?? ??? ??? ?center(g("dragbox"));
?? ??? ??? ?
?? ??? ?};
?? ??? ?//?? ?偵聽瀏覽器窗口大小變化
?? ??? ?window.onresize = showDragon;?? ??? ?
?? ?}
?? ????