类似博客中拖动模块代码

<html><head><title>移动的窗口</title><style>*{font-size:12px}.dragTable{font-size:12px;border-top:1pxsolid#3366cc;margin-bottom:10px;width:100%;background-color:#FFFFFF;}.dragTR{cursor:move;color:#7787cc;background-color:#e5eef9;}td{vertical-align:top;}#parentTable{border-collapse:collapse;letter-spacing:25px;}</style><scriptdefer>vardraged=false;tdiv=null;functiondragStart(){ao=event.srcElement;if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;elsereturn;draged=true;tdiv=document.createElement("div");tdiv.innerHTML=ao.outerHTML;tdiv.style.display="block";tdiv.style.position="absolute";tdiv.style.filter="alpha(opacity=70)";tdiv.style.cursor="move";tdiv.style.width=ao.offsetWidth;tdiv.style.height=ao.offsetHeight;tdiv.style.top=getInfo(ao).top;tdiv.style.left=getInfo(ao).left;document.body.appendChild(tdiv);lastX=event.clientX;lastY=event.clientY;lastLeft=tdiv.style.left;lastTop=tdiv.style.top;try{ao.dragDrop();}catch(e){}}functiondraging(){//重要:判断MOUSE的位置if(!draged)return;vartX=event.clientX;vartY=event.clientY;tdiv.style.left=parseInt(lastLeft)+tX-lastX;tdiv.style.top=parseInt(lastTop)+tY-lastY;for(vari=0;i<parentTable.cells.length;i++){varparentCell=getInfo(parentTable.cells[i]);if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){varsubTables=parentTable.cells[i].getElementsByTagName("table");if(subTables.length==0){if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){parentTable.cells[i].appendChild(ao);}break;}for(varj=0;j<subTables.length;j++){varsubTable=getInfo(subTables[j]);if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){parentTable.cells[i].insertBefore(ao,subTables[j]);break;}else{parentTable.cells[i].appendChild(ao);}}}}}functiondragEnd(){if(!draged)return;draged=false;mm=ff(150,15);}functiongetInfo(o){//取得坐标varto=newObject();to.left=to.right=to.top=to.bottom=0;vartwidth=o.offsetWidth;vartheight=o.offsetHeight;while(o!=document.body){to.left+=o.offsetLeft;to.top+=o.offsetTop;o=o.offsetParent;}to.right=to.left+twidth;to.bottom=to.top+theight;returnto;}functionff(aa,ab){//从GOOGLE网站来,用于恢复位置varac=parseInt(getInfo(tdiv).left);varad=parseInt(getInfo(tdiv).top);varae=(ac-getInfo(ao).left)/ab;varaf=(ad-getInfo(ao).top)/ab;returnsetInterval(function(){if(ab<1){clearInterval(mm);tdiv.removeNode(true);ao=null;return}ab–;ac-=ae;ad-=af;tdiv.style.left=parseInt(ac)+"px";tdiv.style.top=parseInt(ad)+"px"},aa/ab)}functioninint(){//初始化for(vari=0;i<parentTable.cells.length;i++){varsubTables=parentTable.cells[i].getElementsByTagName("table");for(varj=0;j<subTables.length;j++){if(subTables[j].className!="dragTable")break;subTables[j].rows[0].className="dragTR";subTables[j].rows[0].attachEvent("onmousedown",dragStart);subTables[j].attachEvent("ondrag",draging);subTables[j].attachEvent("ondragend",dragEnd);}}}inint();</script></head><body><tableborder="0"cellpadding="0"cellspacing="10"width="100%"height=500id="parentTable"><tr><tdwidth="25%"valgin="top"><tableborder=0class="dragTable"cellspacing="0"><tr><td>AJAX</td></tr><tr><tdid="div4"></td><tr></table><tableborder=0class="dragTable"cellspacing="0"><tr><td>datagrid</td></tr><tr><tdid="div5"></td><tr></table><tableborder=0class="dragTable"cellspacing="0"><tr><td>asp.net</td></tr><tr><tdid="div3"></td><tr></table></td><tdwidth="25%"><tableborder=0class="dragTable"cellspacing="0"><tr><td>C#.net</td></tr><tr><tdid="div2"></td><tr></table></td><tdwidth="25%"><tableborder=0class="dragTable"cellspacing="0"id="td3"><tr><td>javascrip<ahref="#"onClick="document.all.td3.style.display=’none’"onMouseDown="document.all.imag1.src=’Icon2.gif’"onMouseUp="document.all.imag1.src=’Icon.gif’"onFocus="this.blur()"><imgsrc="Icon.gif"width="16"height="14"id="imag1"border="0"></a></td></tr><tr><tdid="dv"><divid="div10"></div></td><tr></table></td></tr></table></body></html>如果你曾歌颂黎明,那么也请你拥抱黑夜

类似博客中拖动模块代码

相关文章:

你感兴趣的文章:

标签云: