<!doctype html public "-//w3c//dtd html 4.01 transitional//en""http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=gb2312"><title>drag layer</title><style>body,table{color:#000000;font-size:12px;}div.div_one{}.dragbar{color:#ffffff;font-weight:bold}</style><script language="javascript" defer>/*written by joelee@51js*/var tmpelement=null;var dragelement=null;var downx,downy,tmp_o_x,tmp_o_y;var refelement=null;var dragactive=0;var draging=0;function readydrag(){dragactive=1;if(event.srcelement.tagname!="div")return;dragelement=event.srcelement.parentnode;tmpelement=dragelement.clonenode(true);tmpelement.style.filter="alpha(opacity=90)";tmpelement.style.zindex=2;dragelement.style.zindex=1;tmpelement.style.position="absolute";if(dragelement.parentnode.tagname!="body"){dragelement.style.left=dragelement.offsetleft+dragelement.parentnode.style.pixelleft;dragelement.style.top=dragelement.offsettop+dragelement.parentnode.style.pixeltop;}downx=event.clientx;downy=event.clienty;tmp_o_x=dragelement.style.pixelleft;tmp_o_y=dragelement.style.pixeltop;tmpelement.style.visibility="hidden";document.body.appendchild(tmpelement);document.onmousemove=startdrag;}document.onmouseup=enddrag;function startdrag(){if(dragactive==1&&event.button==1&&dragelement!=null&&tmpelement!=null){tmpelement.style.visibility="visible";tmpelement.style.left=tmp_o_x+event.clientx-downx;tmpelement.style.top=tmp_o_y+event.clienty-downy;dragelement.style.backgroundcolor="#cccccc";document.body.style.cursor="move";draging=1;}}function enddrag(){if(dragactive==1&&tmpelement!=null){if(draging==1){dragelement.removenode(true);draging=0;}tmpelement.style.filter="alpha(opacity=100)";tmpelement.style.zindex=1;document.body.style.cursor="default";if(refelement!=null&&refelement.parentnode!=null&&refelement.parentnode.tagname!="body"){tmpelement.style.width=refelement.parentnode.style.width;tmpelement.style.position="";refelement.parentnode.insertbefore(tmpelement,refelement);}}dragelement=null;tmpelement=null;dragactive=0;}function readyinsert(){if(dragactive==1){var element=event.srcelement;if(element==dragelement)return;if(element.tagname!="div")return;if(element.classname=="dragbar"||element.classname=="textsheet"||element.classname=="blankbar")element=element.parentnode;element.style.backgroundcolor="#cccccc";element.style.filter="alpha(opacity=50)";refelement=element;}}function failinsert(){var element=event.srcelement;if(element.tagname!="div")return;try{if(element.classname=="dragbar"||element.classname=="textsheet"||element.classname=="blankbar")element=element.parentnode;}catch(e){}element.style.filter="alpha(opacity=100)";element.style.backgroundcolor="#ffffff";refelement=null;}document.onselectstart=function(){return false}</script></head><body><div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff;" onmouseover="readyinsert()" onmouseout="failinsert()"><div onmousedown="readydrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragdiv" class="dragbar"><img src="snap_icon.gif" width="16" height="16">window</div><div class="textsheet" style="border:1px solid #996666;">content<br>content<br>content<br>content <br></div><div class="blankbar" style="height:10px"></div></div><div id="grid1" style="position:absolute; left:534px; top:37px; width:336px; height:15px; z-index: 100; visibility: visible;"><div style="height:20px;z-index:2;" onmouseover="readyinsert()" onmouseout="failinsert();">把层拖动到这儿</div></div><div id="grid2" style="position:absolute; left:20px; top:40px; width:494px; height:15px; z-index: 100; visibility: visible;"><div style="height:20px;z-index:2; background-image:url()" onmouseover="readyinsert()" onmouseout="failinsert();">把层拖动到这儿</div></div><div id="div_one" class="div_one" style="position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff;" onmouseover="readyinsert()" onmouseout="failinsert()"><div onmousedown="readydrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragdiv" class="dragbar"><img src="snap_icon.gif" width="16" height="16">bbs</div><div class="textsheet" style="border:1px solid #996666;">content</div><div class="blankbar" style="height:10px"></div></div><div id="div_one" class="div_one" style="position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff;" onmouseover="readyinsert()" onmouseout="failinsert()"><div onmousedown="readydrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragdiv" class="dragbar"><img src="snap_icon.gif" width="16" height="16">log</div><div class="textsheet" style="border:1px solid #996666;">content<br>content<br>content <br>content<br></div><div class="blankbar" style="height:10px"></div></div><div id="div_one" class="div_one" style="position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff;" onmouseover="readyinsert()" onmouseout="failinsert()"><div onmousedown="readydrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragdiv" class="dragbar"><img src="snap_icon.gif" width="16" height="16">worker</div><div class="textsheet" style="border:1px solid #996666;">content</div><div class="blankbar" style="height:10px"></div></div><div id="div_one" class="div_one" style="position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff;" onmouseover="readyinsert()" onmouseout="failinsert()"><div onmousedown="readydrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragdiv" class="dragbar"><img src="snap_icon.gif" width="16" height="16">tools</div><div class="textsheet" style="border:1px solid #996666;">content</div><div class="blankbar" style="height:10px"></div></div></body></html>
[ctrl+a 全部选择 提示：你可先修改部分代码，再按运行]
<html><head><title>drag the div</title><style>*{font-size:12px}.dragtable{font-size:12px;border-top:1px solid #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><script defer>/****joelee************e-mail:hktx@163.com****qq:48293707*****11:09 2006-2-9******/var draged=false;tdiv=null;function dragstart(){ao=event.srcelement;if((ao.tagname=="td")||(ao.tagname=="tr"))ao=ao.offsetparent;else return;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){}}function draging(){//重要:判断mouse的位置if(!draged)return;var tx=event.clientx;var ty=event.clienty;tdiv.style.left=parseint(lastleft)+tx-lastx;tdiv.style.top=parseint(lasttop)+ty-lasty;for(var i=0;i<parenttable.cells.length;i++){var parentcell=getinfo(parenttable.cells[i]);if(tx>=parentcell.left&&tx<=parentcell.right&&ty>=parentcell.top&&ty<=parentcell.bottom){var subtables=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(var j=0;j<subtables.length;j++){var subtable=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);}}}}}function dragend(){if(!draged)return;draged=false;mm=ff(150,15);}function getinfo(o){//取得坐标var to=new object();to.left=to.right=to.top=to.bottom=0;var twidth=o.offsetwidth;var theight=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;return to;}function ff(aa,ab){//从google网站来,用于恢复位置var ac=parseint(getinfo(tdiv).left);var ad=parseint(getinfo(tdiv).top);var ae=(ac-getinfo(ao).left)/ab;var af=(ad-getinfo(ao).top)/ab;return setinterval(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)}function inint(){//初始化for(var i=0;i<parenttable.cells.length;i++){var subtables=parenttable.cells[i].getelementsbytagname("table");for(var j=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><table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parenttable"><tr ><td width="25%" valgin="top"><table border=0 class="dragtable" cellspacing="0"><tr><td><b>gmail</b></td></tr><tr><td>暂时无法显示gmail内容</td><tr></table><table border=0 class="dragtable" cellspacing="0"><tr><td>新浪体育</td></tr><tr><td>解剖威队独门利器fw28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td><tr></table><table border=0 class="dragtable" cellspacing="0"><tr><td>焦点</td></tr><tr><td>京广线中断4小时20临客返汉晚点中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者武汉晨报 - 所有 179 相关报道 »</td><tr></table></td><td width="25%"><table border=0 class="dragtable" cellspacing="0"><tr><td>中关村在线</td></tr><tr><td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600gt一降降一百 罗技g15游戏键盘热力促销，代购价仅529元 </td><tr></table></td><td width="25%"><table border=0 class="dragtable" cellspacing="0"><tr><td>网易商业</td></tr><tr><td>上海gdp增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td><tr></table></td></tr></table></body></html>
扫描关注微信公众号
闽公网安备 35060202000074号