JS仿iGoogle自定义首页模块拖拽特效的方法
本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS仿iGoogle自定义首页模块拖拽效果</title>
<scripttype="text/javascript">
varCommon={
getEvent:function(){//ie/ff
if(document.all){
returnwindow.event;
}
func=getEvent.caller;
while(func!=null){
vararg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event||arg0.constructor==MouseEvent)||(typeof(arg0)=="object"&&arg0.preventDefault&&arg0.stopPropagation)){
returnarg0;
}
}
func=func.caller;
}
returnnull;
},
getMousePos:function(ev){
if(!ev){
ev=this.getEvent();
}
if(ev.pageX||ev.pageY){
return{
x:ev.pageX,
y:ev.pageY
};
}
if(document.documentElement&&document.documentElement.scrollTop){ return{ x:ev.clientX+document.documentElement.scrollLeft-document.documentElement.clientLeft, y:ev.clientY+document.documentElement.scrollTop-document.documentElement.clientTop }; } elseif(document.body){ return{ x:ev.clientX+document.body.scrollLeft-document.body.clientLeft, y:ev.clientY+document.body.scrollTop-document.body.clientTop }; } }, getElementPos:function(el){ el=this.getItself(el); var_x=0,_y=0; do{ _x+=el.offsetLeft; _y+=el.offsetTop; }while(el=el.offsetParent); return{x:_x,y:_y}; }, getItself:function(id){ return"string"==typeofid?document.getElementById(id):id; }, getViewportSize:{w:(window.innerWidth)?window.innerWidth:(document.documentElement&&document.documentElement.clientWidth)?document.documentElement.clientWidth:(document.body?document.body.offsetWidth:0),h:(window.innerHeight)?window.innerHeight:(document.documentElement&&document.documentElement.clientHeight)?document.documentElement.clientHeight:(document.body?document.body.offsetHeight:0)}, isIE:document.all?true:false, setOuterHtml:function(obj,html){ varObjrange=document.createRange(); obj.innerHTML=html; Objrange.selectNodeContents(obj); varfrag=Objrange.extractContents(); obj.parentNode.insertBefore(frag,obj); obj.parentNode.removeChild(obj); }, firstChild:function(parentObj,tagName){ if(Common.isIE){ returnparentObj.firstChild; } else{ vararr=parentObj.getElementsByTagName(tagName); returnarr[0]; } }, lastChild:function(parentObj,tagName){ if(Common.isIE){ returnparentObj.lastChild; } else{ vararr=parentObj.getElementsByTagName(tagName); returnarr[arr.length-1]; } }, setCookie:function(name,value){ document.cookie=name+"="+value; }, getCookie:function(name){ varstrCookie=document.cookie; vararrCookie=strCookie.split(";"); for(vari=0;i<arrCookie.length;i++){ vararr=arrCookie[i].split("="); if(!arr[1]){ return""; } if(arr[0]==name){ returnarr[1]; } } return""; }, delCookie:function(name){ varexp=newDate(); exp.setTime(exp.getTime()-1); varcval=this.getCookie(name); if(cval!=null)document.cookie=name+"="+cval+";expires="+exp.toGMTString(); } } varClass={ create:function(){ returnfunction(){this.init.apply(this,arguments);} } } varDrag=Class.create(); Drag.prototype={ init:function(titleBar,dragDiv,Options){ //设置点击是否透明，默认透明60% titleBar=Common.getItself(titleBar); dragDiv=Common.getItself(dragDiv); this.dragArea={maxLeft:-9999,maxRight:9999,maxTop:-9999,maxBottom:9999}; if(Options){ this.opacity=Options.opacity?(isNaN(parseInt(Options.opacity))?100:parseInt(Options.opacity)):100; if(Options.area){ if(Options.area.left&&!isNaN(parseInt(Options.area.left))){this.dragArea.maxLeft=Options.area.left}; if(Options.area.right&&!isNaN(parseInt(Options.area.right))){this.dragArea.maxRight=Options.area.right}; if(Options.area.top&&!isNaN(parseInt(Options.area.top))){this.dragArea.maxTop=Options.area.top}; if(Options.area.bottom&&!isNaN(parseInt(Options.area.bottom))){this.dragArea.maxBottom=Options.area.bottom}; } } else{ this.opacity=60; } this.originDragDiv=null; this.tmpX=0; this.tmpY=0; this.moveable=false; this.dragArray=[];
vardragObj=this; vardragTbl=document.getElementById("dragTable");
titleBar.onmousedown=function(e){ varev=e||window.event||Common.getEvent(); //只允许通过鼠标左键进行拖拽,IE鼠标左键为1FireFox为0 if(Common.isIE&&ev.button==1||!Common.isIE&&ev.button==0){ } else{ returnfalse; }
//处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方 vartmpColId; for(c=0;c<dragTbl.rows[0].cells.length;c++){ for(k=0;k<dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length;k++){ if(dragDiv.id==dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id){ tmpColId=c; break; } } } vartmpPosFirstChild=Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId],"DIV")); vartmpPosLastChild=Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId],"DIV")); vartmpObj={colId:tmpColId,firstChildUp:tmpPosFirstChild.y,lastChildDown:tmpPosLastChild.y+Common.lastChild(dragTbl.rows[0].cells[tmpColId],"DIV").offsetHeight};
//保存当前可拖拽各容器的所在位置 dragObj.dragArray=dragObj.RegDragsPos();
//插入虚线框 vardashedElement=document.createElement("div"); dashedElement.style.cssText=dragDiv.style.cssText; dashedElement.style.border="dashed2px#aaa"; dashedElement.style.marginBottom="6px"; dashedElement.style.width=dragDiv.offsetWidth-2*parseInt(dashedElement.style.borderWidth)+"px";//减去boderWidth使虚线框大小保持与dragDiv一致 dashedElement.style.height=dragDiv.offsetHeight-2*parseInt(dashedElement.style.borderWidth)+"px";//加上px保证FF正确 dashedElement.style.position="relative"; if(dragDiv.nextSibling){ dragDiv.parentNode.insertBefore(dashedElement,dragDiv.nextSibling); } else{ dragDiv.parentNode.appendChild(dashedElement); } //拖动时变为absolute dragDiv.style.width=dragDiv.offsetWidth+"px"; dragDiv.style.position="absolute";
dragObj.moveable=true; dragDiv.style.zIndex=dragObj.GetZindex()+1;
vardownPos=Common.getMousePos(ev); dragObj.tmpX=downPos.x-dragDiv.offsetLeft; dragObj.tmpY=downPos.y-dragDiv.offsetTop;
if(Common.isIE){ dragDiv.setCapture(); }else{ window.captureEvents(Event.mousemove); }
dragObj.SetOpacity(dragDiv,dragObj.opacity);
//FireFox去除容器内拖拽图片问题 if(ev.preventDefault){ ev.preventDefault(); ev.stopPropagation(); }
document.onmousemove=function(e){ if(dragObj.moveable){ varev=e||window.event||Common.getEvent(); //IE去除容器内拖拽图片问题 if(document.all)//IE { ev.returnValue=false; }
varmovePos=Common.getMousePos(ev); dragDiv.style.left=Math.max(Math.min(movePos.x-dragObj.tmpX,dragObj.dragArea.maxRight),dragObj.dragArea.maxLeft)+"px"; dragDiv.style.top=Math.max(Math.min(movePos.y-dragObj.tmpY,dragObj.dragArea.maxBottom),dragObj.dragArea.maxTop)+"px";
vartargetDiv=null; for(vark=0;k<dragObj.dragArray.length;k++){ if(dragDiv==dragObj.dragArray[i]){ continue; }
if(movePos.x>dragObj.dragArray[k].PosLeft&&movePos.x<dragObj.dragArray[k].PosLeft+dragObj.dragArray[k].PosWidth &&movePos.y>dragObj.dragArray[k].PosTop&&movePos.y<dragObj.dragArray[k].PosTop+dragObj.dragArray[k].PosHeight ){ targetDiv=document.getElementById(dragObj.dragArray[k].DragId); if(movePos.y<dragObj.dragArray[k].PosTop+dragObj.dragArray[k].PosHeight/2){ //往上移 dashedElement.style.width=targetDiv.offsetWidth-2*parseInt(dashedElement.style.borderWidth)+"px"; targetDiv.parentNode.insertBefore(dashedElement,targetDiv); } else{ //往下移 dashedElement.style.width=targetDiv.offsetWidth-2*parseInt(dashedElement.style.borderWidth)+"px"; if(targetDiv.nextSibling){ targetDiv.parentNode.insertBefore(dashedElement,targetDiv.nextSibling); } else{ targetDiv.parentNode.appendChild(dashedElement); } } } } for(j=0;j<dragTbl.rows[0].cells.length;j++){ varstartLeft=Common.getElementPos(dragTbl.rows[0].cells[j]).x; if(movePos.x>startLeft&&movePos.x<startLeft+dragTbl.rows[0].cells[j].offsetWidth){ ///列无DIV if(dragTbl.rows[0].cells[j].getElementsByTagName("div").length==0){ dashedElement.style.width=dragTbl.rows[0].cells[j].offsetWidth-2*parseInt(dashedElement.style.borderWidth)+"px"; dragTbl.rows[0].cells[j].appendChild(dashedElement); } else{ varposFirstChild=Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j],"DIV")); varposLastChild=Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j],"DIV")); //处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方 vartmpUp,tmpDown; if(tmpObj.colId==j){ tmpUp=tmpObj.firstChildUp; tmpDown=tmpObj.lastChildDown; } else{ tmpUp=posFirstChild.y; tmpDown=posLastChild.y+Common.lastChild(dragTbl.rows[0].cells[j],"DIV").offsetHeight; }
if(movePos.y<tmpUp){///从最上面插入虚线框 dashedElement.style.width=Common.firstChild(dragTbl.rows[0].cells[j],"DIV").offsetWidth-2*parseInt(dashedElement.style.borderWidth)+"px"; dragTbl.rows[0].cells[j].insertBefore(dashedElement,Common.firstChild(dragTbl.rows[0].cells[j],"DIV")); } elseif(movePos.y>tmpDown){///从最下面插入虚线框 dashedElement.style.width=Common.lastChild(dragTbl.rows[0].cells[j],"DIV").offsetWidth-2*parseInt(dashedElement.style.borderWidth)+"px"; dragTbl.rows[0].cells[j].appendChild(dashedElement); }
} } } } };
document.onmouseup=function(){ if(dragObj.moveable){ if(Common.isIE){ dragDiv.releaseCapture(); } else{ window.releaseEvents(dragDiv.mousemove); } dragObj.SetOpacity(dragDiv,100); dragObj.moveable=false; dragObj.tmpX=0; dragObj.tmpY=0;
//务必写在此IF内 dragDiv.style.left=""; dragDiv.style.top="";
dragDiv.style.width=""; dragDiv.style.position=""; dashedElement.parentNode.insertBefore(dragDiv,dashedElement); dashedElement.parentNode.removeChild(dashedElement); }
};
} }, SetOpacity:function(dragDiv,n){ if(Common.isIE){ dragDiv.filters.alpha.opacity=n; } else{ dragDiv.style.opacity=n/100; }
}, GetZindex:function(){ varmaxZindex=0; vardivs=document.getElementsByTagName("div"); for(z=0;z<divs.length;z++){ maxZindex=Math.max(maxZindex,divs[z].style.zIndex); } returnmaxZindex; }, RegDragsPos:function(){ vararrDragDivs=newArray(); vardragTbl=document.getElementById("dragTable"); vartmpDiv,tmpPos; for(i=0;i<dragTbl.getElementsByTagName("div").length;i++){ tmpDiv=dragTbl.getElementsByTagName("div")[i]; if(tmpDiv.className=="dragDiv"){ tmpPos=Common.getElementPos(tmpDiv); arrDragDivs.push({DragId:tmpDiv.id,PosLeft:tmpPos.x,PosTop:tmpPos.y,PosWidth:tmpDiv.offsetWidth,PosHeight:tmpDiv.offsetHeight}); } } returnarrDragDivs; } }
window.onload=function(){ vardragTbl=document.getElementById("dragTable"); if(Common.getCookie("configArr")){ varconfigArr=eval("("+Common.getCookie("configArr")+")"); for(i=0;i<dragTbl.rows[0].cells.length;i++){ for(j=0;j<configArr[i].length;j++){ dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j])); } } } newDrag("titleBar1","dragDiv1"); newDrag("titleBar2","dragDiv2"); newDrag("titleBar3","dragDiv3"); newDrag("titleBar4","dragDiv4"); newDrag("titleBar5","dragDiv5"); }
window.onunload=function(){ vardragTbl=document.getElementById("dragTable"); varconfigArr=""; for(i=0;i<dragTbl.rows[0].cells.length;i++){ vartmpStr=""; for(j=0;j<dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length;j++){ tmpStr+=(tmpStr==""?"":",")+"'"+dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id+"'"; } configArr+=(configArr==""?"":",")+"["+tmpStr+"]"; } //formatlike:[['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']] Common.setCookie("configArr","["+configArr+"]"); } </script> <styletype="text/css"> .spanDiv{ position:relative; width:5px; height:5px; }
.dragDiv,.nodragDiv{ position:relative; filter:alpha(opacity=100); opacity:1; margin-bottom:6px; background-color:#FFFFFF; } </style> </head> <body> <scripttype="text/javascript">
</script> <tableid="dragTable"cellpadding="3" style="border:solid0pxgreen;width:98%;"> <tr> <tdvalign="top"style="width:30%"> <divclass="dragDiv"id="dragDiv1"> <tablecellpadding="0"cellspacing="0"border="1"style="width:100%;border-collapse:collapse;border-color:Blue"> <trid="titleBar1" style="height:22px;text-align:left;background-color:#547BC9;color:White;padding:3px;cursor:move;"> <thalign="left"unselectable="on">Title1</th> </tr> <trstyle="height:130px;padding:3px;"align="left"valign="top"> <tdunselectable="on">这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出></td> </tr> </table> </div> <divclass="dragDiv"id="dragDiv2"> <tablecellpadding="0"cellspacing="0"border="1"style="width:100%;border-collapse:collapse;border-color:Blue"> <trid="titleBar2"style="height:22px;text-align:left;background-color:#547BC9;color:White;padding:3px;cursor:move;"> <thalign="left"unselectable="on">Title2</th> </tr> <trstyle="height:130px;padding:3px;"align="left"valign="top"> <tdunselectable="on">Content2...</td> </tr> </table> </div> </td> <tdvalign="top"style="width:50%"> <divclass="dragDiv"id="dragDiv3"> <tablecellpadding="0"cellspacing="0"border="1"style="width:100%;border-collapse:collapse;border-color:Blue"> <trid="titleBar3"style="height:22px;text-align:left;background-color:#547BC9;color:White;padding:3px;cursor:move;"> <thalign="left"unselectable="on">Title3</th> </tr> <trstyle="height:230px;padding:3px;"align="left"valign="top"> <tdunselectable="on">Content3...</td> </tr> </table> </div> </td> <tdvalign="top"style="width:20%"> <divclass="dragDiv"id="dragDiv4"> <tablecellpadding="0"cellspacing="0"border="1"style="width:100%;border-collapse:collapse;border-color:Blue"> <trid="titleBar4"style="height:22px;text-align:left;background-color:#547BC9;color:White;padding:3px;cursor:move;"> <thalign="left"unselectable="on">Title4</th> </tr> <trstyle="height:130px;padding:3px;"align="left"valign="top"> &