<HTML>
<Head>
<Title> drag the DIV </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Style>
* {Font-size: 12px}
. Dragtable {
Font-size: 12px;
Border-top: 1px solid # 3366cc;
Margin-bottom: 10px;
Width: 100%;
Background-color: # ffffff;
}
TD {vertical-align: Top ;}
. Dragtr {
Cursor: move;
Color: # 7787cc;
Background-color: # e5eef9;
Height: 20px;
Padding-left: 5px;
Font-weight: bold;
}
# Parenttable {
Border-collapse: collapse;
Letter-Spacing: 25px;
}
</Style>
<SCRIPT defer>
/***** Joelee ************ E-MAIL: hktx@163.com ***** QQ: 48293707 ******/
VaR drag = {dragged: false,
AO: NULL,
Tdiv: NULL,
Dragstart: function (){
Drag. Ao = event. srcelement;
If (drag. AO. tagname = "TD") | (drag. AO. tagname = "TR ")){
Drag. Ao = drag. AO. offsetparent;
Drag. AO. style. zindex = 100;
} Else
Return;
Drag. Dragged = true;
Drag. tdiv = Document. createelement ("Div ");
Drag. tdiv. innerhtml = drag. AO. outerhtml;
Drag. AO. style. Border = "1px dashed red ";
Drag. tdiv. style. Display = "Block ";
Drag. tdiv. style. Position = "absolute ";
Drag. tdiv. style. Filter = "alpha (opacity = 70 )";
Drag. tdiv. style. cursor = "move ";
Drag. tdiv. style. Border = "1px solid #000000 ";
Drag. tdiv. style. width = drag. AO. offsetwidth;
Drag. tdiv. style. Height = drag. AO. offsetheight;
Drag. tdiv. style. Top = drag. getinfo (drag. AO). Top;
Drag. tdiv. style. Left = drag. getinfo (drag. AO). Left;
Document. Body. appendchild (drag. tdiv );
Drag. lastx = event. clientx;
Drag. lasty = event. clienty;
Drag. lastleft = drag. tdiv. style. Left;
Drag. lasttop = drag. tdiv. style. Top;
},
Draging: function () {// important: Judge the mouse position
If (! Drag. Dragged | drag. Ao = NULL) return;
VaR Tx = event. clientx;
VaR ty = event. clienty;
Drag. tdiv. style. Left = parseint (drag. lastleft) + tX-Drag.lastX;
Drag. tdiv. style. Top = parseint (drag. lasttop) + tY-Drag.lastY;
For (VAR I = 0; I <parenttable. cells. length; I ++ ){
VaR parentcell = drag. 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 (drag. AO );
}
Break;
}
For (var j = 0; j <subtables. length; j ++ ){
VaR subtable = drag. getinfo (subtables [J]);
If (TX> = subtable. Left & TX <= subtable. Right & ty> = subtable. Top & ty <= subtable. Bottom ){
Parenttable. cells [I]. insertbefore (drag. AO, subtables [J]);
Break;
} Else {
Parenttable. cells [I]. appendchild (drag. AO );
}
}
}
}
}
,
Dragend: function (){
If (! Drag. Dragged) return;
Drag. Dragged = false;
Drag. Mm = drag. Repos (150,15 );
Drag. AO. style. borderwidth = "0px ";
Drag. AO. style. bordertop = "1px solid # 3366cc ";
Drag. tdiv. style. borderwidth = "0px ";
Drag. AO. style. zindex = 1;
},
Getinfo: function (o) {// get coordinates
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;
},
Repos: function (AA, AB ){
VaR F = drag. tdiv. Filters. Alpha. opacity;
VaR TL = parseint (drag. getinfo (drag. tdiv). Left );
VaR TT = parseint (drag. getinfo (drag. tdiv). Top );
VaR KL = (tl-Drag.getInfo (drag. AO). Left)/AB;
VaR KT = (tt-Drag.getInfo (drag. AO). Top)/AB;
VaR kf = f/AB;
Return setinterval (function () {If (AB <1 ){
Clearinterval (drag. mm );
Drag. tdiv. removenode (true );
Drag. Ao = NULL;
Return;
}
AB --;
TL-= kl;
TT-= kt;
F-= KF;
Drag. tdiv. style. Left = parseint (TL) + "PX ";
Drag. tdiv. style. Top = parseint (TT) + "PX ";
Drag. tdiv. Filters. Alpha. Opacity = F;
}
, AA/AB)
},
Inint: function () {// Initialization
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", Drag. dragstart );
}
}
Document. onmousemove = drag. draging;
Document. onmouseup = drag. dragend;
}
// End of object drag
}
Drag. inint ();
Function _ show (STR ){
VaR W = Window. Open ('','');
VaR dashboard Doc ument;
D. open ();
STR = Str. Replace (/= (?! ")(.*?) (?! ") (|>)/G," = \ "$1 \" $2 ");
STR = Str. Replace (/(<)(.*?) (>)/G, "<span style = 'color: red; '> <$2> </span> <br/> ");
STR = Str. Replace (/\ r/g, "<br/> \ n ");
D. Write (STR );
}
</SCRIPT>
</Head>
<Body>
<Table border = "0" cellpadding = "0" cellspacing = "10" width = "100%" Height = 500 id = "parenttable">
<Tr>
& Lt; TD width = "25%" valgin = "TOP" & gt;
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> <B> Gmail </B> </TD>
</Tr>
<Tr>
<TD> Gmail content cannot be displayed for the moment </TD>
<Tr>
</Table> <Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> Sina sports </TD>
</Tr>
<Tr>
<TD> anatomy of the Huawei team's exclusive weapon fw28 20 thousand transfer Engine Matching super transmission Awards: Xin GIS is delighted to start with the championship
India's partner set a record in AFP's forward-looking Winter Olympics: China and South Korea's leading actress Meijia Shi Leng Jian </TD>
<Tr>
</Table>
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> focus </TD>
</Tr>
<Tr>
<TD> the Beijing-Guangzhou line was interrupted for 4 hours and 20 passengers returned to China later. China News Network-Hubei News Agency-All 235 reports» hamad' already has a candidate for Prime Minister
Liberation Daily Newspaper Group-All 489 reports» Chen shui-bian is the trouble maker of cross-strait relations Wuhan Morning Post-all 179 reports» </TD>
<Tr>
</Table>
</TD>
& Lt; TD width = "25%" & gt;
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> Zhongguancun online </TD>
</Tr>
<Tr>
<TD> the New Year's Market Express double-sensitivity card low-price recommendations have finally arrived. Yingtai 6600gt dropped by one hundred. Logitech g15 game keyboard thermal sales promotion, with the purchase price of only 529 RMB </TD>
<Tr>
</Table> </TD>
& Lt; TD width = "25%" & gt;
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> Netease business </TD>
</Tr>
<Tr>
<TD> Shanghai's GDP growth declined last year to respond to anti-dumping attacks against Chinese shoes and enterprises in the face of the European Union's Yin jiaxiu operating system Southern automobile Changan seeking a curve of overall overseas listing </TD>
<Tr>
</Table> <Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> black world </TD>
</Tr>
<Tr>
<TD> Shanghai's GDP growth declined last year to respond to anti-dumping attacks against Chinese shoes and enterprises in the face of the European Union's Yin jiaxiu operating system Southern automobile Changan seeking a curve of overall overseas listing </TD>
<Tr>
</Table>
</TD>
</Tr>
</Table>
<Input type = "button" value = "show" onclick = "_show(document.doc umentelement. innerhtml)"/>
</Body>
</Html>