<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" ><ptml> <pead><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";d ocument.body.appendChild (tmpelement);d Ocument.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 ";d ocument.body.style.cursor=" Move ";d raging=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></pead><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; " ><div style= "Cursor:move; border:1px solid #996666; Background-color: #996666; height:20px "Name=" Dragdiv "class=" Dragbar ">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;" > Drag the layer here </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 () > Drag the layers here </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; " ><div style= "Cursor:move; border:1px solid #996666; Background-color: #996666; height:20px "Name=" Dragdiv "class=" Dragbar ">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; " ><div style= "Cursor:move; border:1px solid #996666; Background-color: #996666; height:20px "Name=" Dragdiv "class=" Dragbar ">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; " ><div style= "Cursor:move; border:1px solid #996666; Background-color: #996666; height:20px "Name=" Dragdiv "class=" Dragbar ">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; " ><div style= "Cursor:move; BORDER:1PX Solid #996666; Background-color: #996666; height:20px "Name=" Dragdiv "class=" Dragbar ">tools</div><div class=" Textsheet "style=" border:1px solid #996666; >content</div><div class= "Blankbar" style= "height:10px" ></div></div></body>< /html>
[Ctrl + a ALL SELECT hint: You can modify some of the code first, then run]
<ptml><pead><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 () {//Important: Judge Mouse position if (!draged) Return;var Tx=event.clientx;var; 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]); Else{parenttabLe.cells[i].appendchild (AO);}}}} function Dragend () {if (!draged) return;draged=false;mm=ff (150,15);} function GetInfo (o) {//Get coordinate 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) {//From Google Web site to restore location var ac=parseint (GetInfo (Tdiv). left); var ad=parseint (GetInfo (tdiv). top); 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 () {//Initialize 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></pead><body><table border= "0" cellpadding= "0" cellspacing= "ten" width= "100%" height=500 id= "parenttable" ><tr ><td width= "25%" valgin= "Top" ><table border=0 "class=" cellspacing= "0" ><tr><td><b>GMAIL</b></td></tr><tr><td> Temporarily unable to display Gmail content </td><tr></table><table border=0 class= "dragtable" cellspacing= "0" ><tr ><td> Sina Sports </td></tr><tr><td> Anatomy team's great weapon FW28 20,000-turn engine matching Super Transmission awards: Hingis happy to start with the Championship India's partner sets record AFP prospect Winter Olympics short track speed skating: China and South Korea arrow </td><tr></table><table border=0 class= "dragtable" cellspacing = "0" ><tr><td> focus </td></tr><tr><td> Jingguang line interruption 4 hours 20 Pro guest back to Han China News-Hubei Branch-all 235 related reports» Hamas already has a choice of Prime Minister Jiefang Daily newspaper group-all 489 related reports» Chen Shui-bian is the trouble maker of Cross-strait relations Wuhan Morning News-all 179 related reports»</td><TR></TABLE></TD><TD width= "25%" ><table border=0 class= "dragtable" cellspacing= "0" >< Tr><td> Zhongguancun </td></tr><tr><td> New Year express double sensitive board low price recommendation finally waited, Ying Tai 6600GT drop down 100 Logitech G15 Game keyboard Thermal promotion, Purchase price is only 529 Yuan </td><tr></table></td><td width= "25%" ><table border=0 class= "DragTable" cellspacing= "0" ><tr><td> netease business </td></tr><tr><td> Shanghai GDP growth last year fell back against Anti-dumping Chinese shoe enterprises join hands against EU Yin Jiaxu the South automobile Changan seeking curve overall overseas listing </td><tr></table></td></tr></table></ Body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
