DIV blocks that can be dragged by AJAX

DIV blocks that can be dragged by AJAX <style>
*
. DragTable {
Font-size: 12px;
Border-top: 1px solid # 3366cc;
Margin-bottom: 10px;
Width: 100%;
Background-color: # FFFFFF;
}
Td
. 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);
If (tX> = parentCell. left & tX <= parentCell. right & tY> = parentCell. top & tY <= parentCell. bottom ){
Var subTables = parentTable. cells. GetElementsByTagName ("table ");
If (subTables. length = 0 ){
If (tX> = parentCell. left & tX <= parentCell. right & tY> = parentCell. top & tY <= parentCell. bottom ){
ParentTable. cells. 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. InsertBefore (Drag. ao, subTables [j]);
Break;
} Else {
ParentTable. cells. 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. 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 unique weapon FW28 20 thousand transfer Engine Matching super transmission Awards: singis is delighted to start with the championship <br/> India's partner set a record, AFP prospective Winter Olympics short track skating: china and South Korea
<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"/>