Page for implementation:
<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 src = "XMLHTTP. js" Language = "JavaScript" type = "text/JavaScript"> </SCRIPT>
<SCRIPT defer>
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: determine the location of the 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) {// 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;
}
Function ff (AA, AB) {// from the Google website, used to restore the location
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 () {// 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", 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>
& Lt; TD width = "25%" valgin = "TOP" & gt;
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> Ajax </TD>
</Tr>
<Tr>
<TD id = "div4"> </TD>
<Tr>
</Table>
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> DataGrid </TD>
</Tr>
<Tr>
<TD id = "div5"> </TD>
<Tr>
</Table>
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> Asp.net </TD>
</Tr>
<Tr>
<TD id = "div3"> </TD>
<Tr>
</Table> </TD>
& Lt; TD width = "25%" & gt;
<Table border = 0 class = "dragtable" cellspacing = "0">
<Tr>
<TD> C #. Net </TD>
</Tr>
<Tr>
<TD id = "div2"> </TD>
<Tr>
</Table> </TD>
& Lt; TD width = "25%" & gt;
<Table border = 0 class = "dragtable" cellspacing = "0" id = "td3">
<Tr>
<TD> expose Crip </TD>
</Tr>
<Tr>
<TD id = "DV"> <Div id = "div10"> </div> </TD>
<Tr>
</Table>
</TD>
</Tr>
</Table>
</Body>
</Html>
Js xmlhttp. js called on the page
// JavaScript document
Function echo (obj1, HTML)
{
$ (Obj1). innerhtml = HTML;
}
Function $ (ID)
{
Return document. getelementbyid (ID );
}
VaR XMLHTTP;
Function createxmlhttprequest (){
If (window. activexobject ){
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest ){
XMLHTTP = new XMLHttpRequest ();
}
}
Function parseresults (obj1 ){
VaR Results = XMLHTTP. responsexml;
VaR item = NULL;
VaR title;
VaR items = results. getelementsbytagname ("item ");
For (VAR I = 0; I <items. length; I ++ ){
Item = items [I];
Title = item. getelementsbytagname ("title") [0]. firstchild. nodevalue;
// Clearpreviusresults ();
Link2 = item. getelementsbytagname ("Link") [0]. firstchild. nodevalue;
Title = STR (title );
Addlistrow (title, link2, obj1 );
}
}
Function readrss (URL, OBJ)
{
Createxmlhttprequest ()
XMLHTTP. onreadystatechange = handlestatechange;
XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );
// XMLHTTP. Abort ();
Function handlestatechange ()
{
If (XMLHTTP. readystate = 2)
{
Echo (OBJ, "submitting data. Please wait ......");
}
Else if (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
// Echo (OBJ, "submitting data. Please wait ......");
Clearpreviusresults (OBJ );
Parseresults (OBJ );
}
}
}
}
Function addlistrow (test, link1, obj2)
{
// Clearpreviusresults (obj2 );
$(Obj2 ). innerhtml + = '<a href = "' + link1 + '" target = "_ blank">' + test + '</a> <br> ';
}
Function STR (stri)
{
VaR strb;
If (stri. length> 30)
{
Strb = stri. substring (0, 30) + '..';
}
Else
{
Strb = stri;
}
Return strb;
}
Function clearpreviusresults (obj3 ){
While ($ (obj3). childnodes. length> 0 ){
$ (Obj3). removechild ($ (obj3). childnodes [0]);
}
}