1<html>
2<head>
3<title>DRAG the DIV</title>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<style>
6*{font-size:12px}
7.dragTable{
8font-size:12px;
9border-top:1px solid #3366cc;
10margin-bottom: 10px;
11width:100%;
12background-color:#FFFFFF;
13}
14td{vertical-align:top;}
15.dragTR{
16cursor:move;
17color:#7787cc;
18background-color:#e5eef9;
19height:20px;
20padding-left:5px;
21font-weight:bold;
22}
23#parentTable{
24border-collapse:collapse;
25letter-spacing:25px;
26}
27</style>
28<script defer>
29/****netxiu************E-MAIL:txidea.com****QQ:5734213***********/
30var Drag={dragged:false,
31 ao:null,
32 tdiv:null,
33dragStart:function(){
34Drag.ao=event.srcElement;
35if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
36 Drag.ao=Drag.ao.offsetParent;
37 Drag.ao.style.zIndex=100;
38}else
39 return;
40Drag.dragged=true;
41Drag.tdiv=document.createElement("div");
42Drag.tdiv.innerHTML=Drag.ao.outerHTML;
43Drag.ao.style.border="1px dashed red";
44Drag.tdiv.style.display="block";
45Drag.tdiv.style.position="absolute";
46Drag.tdiv.style.filter="alpha(opacity=70)";
47Drag.tdiv.style.cursor="move";
48Drag.tdiv.style.border="1px solid #000000";
49Drag.tdiv.style.width=Drag.ao.offsetWidth;
50Drag.tdiv.style.height=Drag.ao.offsetHeight;
51Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
52Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
53document.body.appendChild(Drag.tdiv);
54Drag.lastX=event.clientX;
55Drag.lastY=event.clientY;
56Drag.lastLeft=Drag.tdiv.style.left;
57Drag.lastTop=Drag.tdiv.style.top;
58},
59
60draging:function(){//重要:判断MOUSE的位置
61if(!Drag.dragged||Drag.ao==null)return;
62var tX=event.clientX;
63var tY=event.clientY;
64Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
65Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
66for(var i=0;i<parentTable.cells.length;i++){
67 var parentCell=Drag.getInfo(parentTable.cells[i]);
68 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
69 var subTables=parentTable.cells[i].getElementsByTagName("table");
70 if(subTables.length==0){
71 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
72 parentTable.cells[i].appendChild(Drag.ao);
73 }
74 break;
75 }
76 for(var j=0;j<subTables.length;j++){
77 var subTable=Drag.getInfo(subTables[j]);
78 if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){
79 parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
80 break;
81 }else{
82 parentTable.cells[i].appendChild(Drag.ao);
83 }
84 }
85 }
86}
87}
88,
89dragEnd:function(){
90if(!Drag.dragged)return;
91Drag.dragged=false;
92Drag.mm=Drag.repos(150,15);
93Drag.ao.style.borderWidth="0px";
94Drag.ao.style.borderTop="1px solid #3366cc";
95Drag.tdiv.style.borderWidth="0px";
96Drag.ao.style.zIndex=1;
97},
98getInfo:function(o){//取得坐标
99var to=new Object();
100to.left=to.right=to.top=to.bottom=0;
101var twidth=o.offsetWidth;
102var theight=o.offsetHeight;
103while(o!=document.body){
104 to.left+=o.offsetLeft;
105 to.top+=o.offsetTop;
106 o=o.offsetParent;
107}
108 to.right=to.left+twidth;
109 to.bottom=to.top+theight;
110return to;
111},
112repos:function(aa,ab){
113var f=Drag.tdiv.filters.alpha.opacity;
114var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
115var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
116var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
117var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
118var kf=f/ab;
119return setInterval(function(){if(ab<1){
120 clearInterval(Drag.mm);
121 Drag.tdiv.removeNode(true);
122 Drag.ao=null;
123 return;
124 }
125 ab--;
126 tl-=kl;
127 tt-=kt;
128 f-=kf;
129 Drag.tdiv.style.left=parseInt(tl)+"px";
130 Drag.tdiv.style.top=parseInt(tt)+"px";
131 Drag.tdiv.filters.alpha.opacity=f;
132 }
133,aa/ab)
134},
135inint:function(){//初始化
136for(var i=0;i<parentTable.cells.length;i++){
137 var subTables=parentTable.cells[i].getElementsByTagName("table");
138 for(var j=0;j<subTables.length;j++){
139 if(subTables[j].className!="dragTable")break;
140 subTables[j].rows[0].className="dragTR";
141 subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
142 }
143}
144document.onmousemove=Drag.draging;
145document.onmouseup=Drag.dragEnd;
146}
147//end of Object Drag
148}
149Drag.inint();
150
151function _show(str){
152var w=window.open('','');
153var d=w.document;
154d.open();
155str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
156str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
157str=str.replace(/\r/g,"<br />\n");
158d.write(str);
159}
160</script>
161</head>
162<body>
163<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
164<tr >
165<td width="25%" valgin="top">
166 <table border=0 class="dragTable" cellspacing="0">
167 <tr>
168 <td><b>GMAIL</b></td>
169 </tr>
170 <tr>
171 <td>暂时无法显示GMAIL内容</td>
172 <tr>
173 </table><table border=0 class="dragTable" cellspacing="0">
174 <tr>
175 <td>新浪体育</td>
176 </tr>
177 <tr>
178 <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>
179 <tr>
180 </table>
181 <table border=0 class="dragTable" cellspacing="0">
182 <tr>
183 <td>焦点</td>
184 </tr>
185 <tr>
186 <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选
187 解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 ?</td>
188 <tr>
189 </table>
190</td>
191<td width="25%">
192 <table border=0 class="dragTable" cellspacing="0">
193 <tr>
194 <td>中关村在线</td>
195 </tr>
196 <tr>
197 <td>新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>
198 <tr>
199 </table></td>
200<td width="25%">
201 <table border=0 class="dragTable" cellspacing="0">
202 <tr>
203 <td>网易商业</td>
204 </tr>
205 <tr>
206 <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
207 <tr>
208 </table> <table border=0 class="dragTable" cellspacing="0">
209 <tr>
210 <td>黑可天下</td>
211 </tr>
212 <tr>
213 <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
214 <tr>
215 </table>
216</td>
217</tr>
218</table>
219<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
220</body>
221</html>
222
2<head>
3<title>DRAG the DIV</title>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<style>
6*{font-size:12px}
7.dragTable{
8font-size:12px;
9border-top:1px solid #3366cc;
10margin-bottom: 10px;
11width:100%;
12background-color:#FFFFFF;
13}
14td{vertical-align:top;}
15.dragTR{
16cursor:move;
17color:#7787cc;
18background-color:#e5eef9;
19height:20px;
20padding-left:5px;
21font-weight:bold;
22}
23#parentTable{
24border-collapse:collapse;
25letter-spacing:25px;
26}
27</style>
28<script defer>
29/****netxiu************E-MAIL:txidea.com****QQ:5734213***********/
30var Drag={dragged:false,
31 ao:null,
32 tdiv:null,
33dragStart:function(){
34Drag.ao=event.srcElement;
35if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
36 Drag.ao=Drag.ao.offsetParent;
37 Drag.ao.style.zIndex=100;
38}else
39 return;
40Drag.dragged=true;
41Drag.tdiv=document.createElement("div");
42Drag.tdiv.innerHTML=Drag.ao.outerHTML;
43Drag.ao.style.border="1px dashed red";
44Drag.tdiv.style.display="block";
45Drag.tdiv.style.position="absolute";
46Drag.tdiv.style.filter="alpha(opacity=70)";
47Drag.tdiv.style.cursor="move";
48Drag.tdiv.style.border="1px solid #000000";
49Drag.tdiv.style.width=Drag.ao.offsetWidth;
50Drag.tdiv.style.height=Drag.ao.offsetHeight;
51Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
52Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
53document.body.appendChild(Drag.tdiv);
54Drag.lastX=event.clientX;
55Drag.lastY=event.clientY;
56Drag.lastLeft=Drag.tdiv.style.left;
57Drag.lastTop=Drag.tdiv.style.top;
58},
59
60draging:function(){//重要:判断MOUSE的位置
61if(!Drag.dragged||Drag.ao==null)return;
62var tX=event.clientX;
63var tY=event.clientY;
64Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
65Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
66for(var i=0;i<parentTable.cells.length;i++){
67 var parentCell=Drag.getInfo(parentTable.cells[i]);
68 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
69 var subTables=parentTable.cells[i].getElementsByTagName("table");
70 if(subTables.length==0){
71 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
72 parentTable.cells[i].appendChild(Drag.ao);
73 }
74 break;
75 }
76 for(var j=0;j<subTables.length;j++){
77 var subTable=Drag.getInfo(subTables[j]);
78 if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){
79 parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
80 break;
81 }else{
82 parentTable.cells[i].appendChild(Drag.ao);
83 }
84 }
85 }
86}
87}
88,
89dragEnd:function(){
90if(!Drag.dragged)return;
91Drag.dragged=false;
92Drag.mm=Drag.repos(150,15);
93Drag.ao.style.borderWidth="0px";
94Drag.ao.style.borderTop="1px solid #3366cc";
95Drag.tdiv.style.borderWidth="0px";
96Drag.ao.style.zIndex=1;
97},
98getInfo:function(o){//取得坐标
99var to=new Object();
100to.left=to.right=to.top=to.bottom=0;
101var twidth=o.offsetWidth;
102var theight=o.offsetHeight;
103while(o!=document.body){
104 to.left+=o.offsetLeft;
105 to.top+=o.offsetTop;
106 o=o.offsetParent;
107}
108 to.right=to.left+twidth;
109 to.bottom=to.top+theight;
110return to;
111},
112repos:function(aa,ab){
113var f=Drag.tdiv.filters.alpha.opacity;
114var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
115var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
116var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
117var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
118var kf=f/ab;
119return setInterval(function(){if(ab<1){
120 clearInterval(Drag.mm);
121 Drag.tdiv.removeNode(true);
122 Drag.ao=null;
123 return;
124 }
125 ab--;
126 tl-=kl;
127 tt-=kt;
128 f-=kf;
129 Drag.tdiv.style.left=parseInt(tl)+"px";
130 Drag.tdiv.style.top=parseInt(tt)+"px";
131 Drag.tdiv.filters.alpha.opacity=f;
132 }
133,aa/ab)
134},
135inint:function(){//初始化
136for(var i=0;i<parentTable.cells.length;i++){
137 var subTables=parentTable.cells[i].getElementsByTagName("table");
138 for(var j=0;j<subTables.length;j++){
139 if(subTables[j].className!="dragTable")break;
140 subTables[j].rows[0].className="dragTR";
141 subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
142 }
143}
144document.onmousemove=Drag.draging;
145document.onmouseup=Drag.dragEnd;
146}
147//end of Object Drag
148}
149Drag.inint();
150
151function _show(str){
152var w=window.open('','');
153var d=w.document;
154d.open();
155str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
156str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
157str=str.replace(/\r/g,"<br />\n");
158d.write(str);
159}
160</script>
161</head>
162<body>
163<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
164<tr >
165<td width="25%" valgin="top">
166 <table border=0 class="dragTable" cellspacing="0">
167 <tr>
168 <td><b>GMAIL</b></td>
169 </tr>
170 <tr>
171 <td>暂时无法显示GMAIL内容</td>
172 <tr>
173 </table><table border=0 class="dragTable" cellspacing="0">
174 <tr>
175 <td>新浪体育</td>
176 </tr>
177 <tr>
178 <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>
179 <tr>
180 </table>
181 <table border=0 class="dragTable" cellspacing="0">
182 <tr>
183 <td>焦点</td>
184 </tr>
185 <tr>
186 <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选
187 解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 ?</td>
188 <tr>
189 </table>
190</td>
191<td width="25%">
192 <table border=0 class="dragTable" cellspacing="0">
193 <tr>
194 <td>中关村在线</td>
195 </tr>
196 <tr>
197 <td>新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>
198 <tr>
199 </table></td>
200<td width="25%">
201 <table border=0 class="dragTable" cellspacing="0">
202 <tr>
203 <td>网易商业</td>
204 </tr>
205 <tr>
206 <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
207 <tr>
208 </table> <table border=0 class="dragTable" cellspacing="0">
209 <tr>
210 <td>黑可天下</td>
211 </tr>
212 <tr>
213 <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
214 <tr>
215 </table>
216</td>
217</tr>
218</table>
219<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
220</body>
221</html>
222