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{
8
font-size:12px;
9
border-top:1px solid #3366cc;
10
margin-bottom: 10px;
11
width:100%;
12
background-color:#FFFFFF;
13
}
14
td{vertical-align:top;}
15
.dragTR{
16
cursor:move;
17
color:#7787cc;
18
background-color:#e5eef9;
19
height:20px;
20
padding-left:5px;
21
font-weight:bold;
22
}
23
#parentTable{
24
border-collapse:collapse;
25
letter-spacing:25px;
26
}
27
</style>
28
<script defer>
29
/****netxiu************E-MAIL:txidea.com****QQ:5734213***********/
30
var Drag={dragged:false,
31
ao:null,
32
tdiv:null,
33
dragStart:function(){
34
Drag.ao=event.srcElement;
35
if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
36
Drag.ao=Drag.ao.offsetParent;
37
Drag.ao.style.zIndex=100;
38
}else
39
return;
40
Drag.dragged=true;
41
Drag.tdiv=document.createElement("div");
42
Drag.tdiv.innerHTML=Drag.ao.outerHTML;
43
Drag.ao.style.border="1px dashed red";
44
Drag.tdiv.style.display="block";
45
Drag.tdiv.style.position="absolute";
46
Drag.tdiv.style.filter="alpha(opacity=70)";
47
Drag.tdiv.style.cursor="move";
48
Drag.tdiv.style.border="1px solid #000000";
49
Drag.tdiv.style.width=Drag.ao.offsetWidth;
50
Drag.tdiv.style.height=Drag.ao.offsetHeight;
51
Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
52
Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
53
document.body.appendChild(Drag.tdiv);
54
Drag.lastX=event.clientX;
55
Drag.lastY=event.clientY;
56
Drag.lastLeft=Drag.tdiv.style.left;
57
Drag.lastTop=Drag.tdiv.style.top;
58
},
59
60
draging:function(){//重要:判断MOUSE的位置
61
if(!Drag.dragged||Drag.ao==null)return;
62
var tX=event.clientX;
63
var tY=event.clientY;
64
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
65
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
66
for(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
,
89
dragEnd:function(){
90
if(!Drag.dragged)return;
91
Drag.dragged=false;
92
Drag.mm=Drag.repos(150,15);
93
Drag.ao.style.borderWidth="0px";
94
Drag.ao.style.borderTop="1px solid #3366cc";
95
Drag.tdiv.style.borderWidth="0px";
96
Drag.ao.style.zIndex=1;
97
},
98
getInfo:function(o){//取得坐标
99
var to=new Object();
100
to.left=to.right=to.top=to.bottom=0;
101
var twidth=o.offsetWidth;
102
var theight=o.offsetHeight;
103
while(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;
110
return to;
111
},
112
repos:function(aa,ab){
113
var f=Drag.tdiv.filters.alpha.opacity;
114
var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
115
var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
116
var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
117
var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
118
var kf=f/ab;
119
return 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
},
135
inint:function(){//初始化
136
for(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
}
144
document.onmousemove=Drag.draging;
145
document.onmouseup=Drag.dragEnd;
146
}
147
//end of Object Drag
148
}
149
Drag.inint();
150
151
function _show(str){
152
var w=window.open('','');
153
var d=w.document;
154
d.open();
155
str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
156
str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
157
str=str.replace(/\r/g,"<br />\n");
158
d.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

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222
