Ajax can be dragged by a div block

<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*****11:09 2006-2-9******/
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: Determine the location of the mouse
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 to;
},
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 d=w.document;
D.open ();
Str=str.replace (/= (?!)) (.*?) (?!") (|>)/g, "=" "$");
Str=str.replace (/(<) (. *?) (>)/g, "<span style= ' color:red;" ><$2></span><br/> ");
Str=str.replace (/r/g, "<br/>n");
D.write (str);
}
</script>
<body>
<table border= "0" cellpadding= "0" cellspacing= "ten" width= "100%" height=500 id= "ParentTable" >
<tr >
&LT;TD width= "25%" valgin= "Top" >
<table border=0 class= "dragtable" 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 of the team's own sharp weapon FW28 20,000-turn engine matching Super Transmission awards: Hingis delighted to start with the champions <br/> India partner set a record AFP forward-looking Winter Olympic short track speed skating: China and South Korea, the United States and the U.S. 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 has a Prime Minister candidate
Jiefang Daily Press 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>
&LT;TD width= "25%" >
<table border=0 class= "dragtable" cellspacing= "0" >
<tr>
<td> Zhongguancun </td>
</tr>
<tr>
<td> New Year Express double sensitive Board card low price recommendation finally waited, Ying Tai 6600GT drop down 100 Logitech G15 Game keyboard Thermal promotion, purchase price only 529 Yuan </td>
<tr>
</table></td>
&LT;TD width= "25%" >
<table border=0 class= "dragtable" cellspacing= "0" >
<tr>
<td> NetEase Business </td>
</tr>
<tr>
<td> Shanghai's GDP growth fell last year in response to anti-dumping China shoe companies to join forces against EU Yin Jiaxu pan South automobile Changan seeking curve overall overseas listing </td>
<tr>
</table> <table border=0 class= "dragtable" cellspacing= "0" >
<tr>
<td> Black can world </td>
</tr>
<tr>
<td> Shanghai's GDP growth fell last year in response to anti-dumping China shoe companies to join forces against EU Yin Jiaxu pan South automobile Changan seeking curve overall overseas listing </td>
<tr>
</table>
</td>
</tr>
</table>
<input type= "button" value= "Show"/>