![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
// JavaScript Document
2
function echo(obj1,html)
3![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
4
$(obj1).innerHTML=html;
5
}
6
function $(id)
7![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
8
return document.getElementById(id);
9
}
10
var xmlHttp;
11![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function createXMLHttpRequest()
{
12![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (window.ActiveXObject)
{
13
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
14
}
15![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if (window.XMLHttpRequest)
{
16
xmlHttp = new XMLHttpRequest();
17
}
18
}
19![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function parseResults(obj1)
{
20
var results = xmlHttp.responseXML;
21
var item = null;
22
var title;
23
var items = results.getElementsByTagName("item");
24![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i = 0; i < items.length; i++)
{
25
item = items[i];
26
title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
27
//clearPreviousResults();
28
link2=item.getElementsByTagName("link")[0].firstChild.nodeValue;
29
title=str(title);
30
addListRow(title,link2,obj1);
31
}
32
}
33![](/Images/OutliningIndicators/None.gif)
34
function readrss(url,obj)
35![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
36![](/Images/OutliningIndicators/InBlock.gif)
37
createXMLHttpRequest()
38
xmlHttp.onreadystatechange = handleStateChange;
39
xmlHttp.open("GET", url, true);
40
xmlHttp.send(null);
41
//xmlHttp.abort();
42
function handleStateChange()
43![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
44
if(xmlHttp.readyState==2)
45![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
46
echo(obj,"正在提交数据,请稍等![](/Images/dot.gif)
");
47![](/Images/OutliningIndicators/InBlock.gif)
48
}
49
else if(xmlHttp.readyState==4)
50![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
51
if(xmlHttp.status==200)
52![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
53
//echo(obj,"正在提交数据,请稍等![](/Images/dot.gif)
");
54
clearPreviousResults(obj);
55
parseResults(obj);
56![](/Images/OutliningIndicators/InBlock.gif)
57
}
58
}
59
}
60
}
61![](/Images/OutliningIndicators/None.gif)
62
function addListRow(test,link1,obj2)
63![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
64
//clearPreviousResults(obj2);
65
$(obj2).innerHTML+='<a href="'+link1+'" target="_blank" >'+test+'</a><br>';
66![](/Images/OutliningIndicators/InBlock.gif)
67
}
68
function str(stri)
69![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
70
var strb;
71
if(stri.length>30)
72![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
73
strb=stri.substring(0,30)+'..';
74
}
75
else
76![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
77
strb=stri;
78
}
79
return strb;
80
}
81![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function clearPreviousResults(obj3)
{
82![](/Images/OutliningIndicators/InBlock.gif)
83![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
while($(obj3).childNodes.length > 0)
{
84
$(obj3).removeChild($(obj3).childNodes[0]);
85
}
86
}
html:
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
<html>
2
<head>
3
<title>DRAG the DIV</title>
4
<style>
5![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
*
{font-size:12px}
6![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
.dragTable
{
7
font-size:12px;
8
border-top:1px solid #3366cc;
9
margin-bottom: 10px;
10
width:100%;
11
background-color:#FFFFFF;
12
}
13![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
.dragTR
{
14
cursor:move;
15
color:#7787cc;
16
background-color:#e5eef9;
17
}
18![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
td
{vertical-align:top;}
19![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
#parentTable
{
20
border-collapse:collapse;
21
letter-spacing:25px;
22
}
23
</style>
24
<script src="xmlhttp.js" language="javascript" type="text/javascript"></script>
25
<script defer>
26
var draged=false;
27
tdiv=null;
28![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function dragStart()
{
29
ao=event.srcElement;
30
if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
31
else return;
32
draged=true;
33
tdiv=document.createElement("div");
34
tdiv.innerHTML=ao.outerHTML;
35
tdiv.style.display="block";
36
tdiv.style.position="absolute";
37
tdiv.style.filter="alpha(opacity=70)";
38
tdiv.style.cursor="move";
39
tdiv.style.width=ao.offsetWidth;
40
tdiv.style.height=ao.offsetHeight;
41
tdiv.style.top=getInfo(ao).top;
42
tdiv.style.left=getInfo(ao).left;
43
document.body.appendChild(tdiv);
44
lastX=event.clientX;
45
lastY=event.clientY;
46
lastLeft=tdiv.style.left;
47
lastTop=tdiv.style.top;
48![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
49
ao.dragDrop();
50![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{}
51
}
52![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function draging()
{//重要:判断MOUSE的位置
53
if(!draged)return;
54
var tX=event.clientX;
55
var tY=event.clientY;
56
tdiv.style.left=parseInt(lastLeft)+tX-lastX;
57
tdiv.style.top=parseInt(lastTop)+tY-lastY;
58![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0;i<parentTable.cells.length;i++)
{
59
var parentCell=getInfo(parentTable.cells[i]);
60![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)
{
61
var subTables=parentTable.cells[i].getElementsByTagName("table");
62![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(subTables.length==0)
{
63![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)
{
64
parentTable.cells[i].appendChild(ao);
65
}
66
break;
67
}
68![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var j=0;j<subTables.length;j++)
{
69
var subTable=getInfo(subTables[j]);
70![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom)
{
71
parentTable.cells[i].insertBefore(ao,subTables[j]);
72
break;
73![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
74
parentTable.cells[i].appendChild(ao);
75
}
76
}
77
}
78
}
79
}
80![](/Images/OutliningIndicators/None.gif)
81![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function dragEnd()
{
82
if(!draged)return;
83
draged=false;
84
mm=ff(150,15);
85
}
86![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function getInfo(o)
{//取得坐标
87
var to=new Object();
88
to.left=to.right=to.top=to.bottom=0;
89
var twidth=o.offsetWidth;
90
var theight=o.offsetHeight;
91![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
while(o!=document.body)
{
92
to.left+=o.offsetLeft;
93
to.top+=o.offsetTop;
94
o=o.offsetParent;
95
}
96
to.right=to.left+twidth;
97
to.bottom=to.top+theight;
98
return to;
99
}
100![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function ff(aa,ab)
{//从GOOGLE网站来,用于恢复位置
101
var ac=parseInt(getInfo(tdiv).left);
102
var ad=parseInt(getInfo(tdiv).top);
103
var ae=(ac-getInfo(ao).left)/ab;
104
var af=(ad-getInfo(ao).top)/ab;
105![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
return setInterval(function()
{if(ab<1)
{
106
clearInterval(mm);
107
tdiv.removeNode(true);
108
ao=null;
109
return
110
}
111
ab--;
112
ac-=ae;
113
ad-=af;
114
tdiv.style.left=parseInt(ac)+"px";
115
tdiv.style.top=parseInt(ad)+"px"
116
}
117
,aa/ab)
118
}
119![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function inint()
{//初始化
120![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0;i<parentTable.cells.length;i++)
{
121
var subTables=parentTable.cells[i].getElementsByTagName("table");
122![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var j=0;j<subTables.length;j++)
{
123
if(subTables[j].className!="dragTable")break;
124
subTables[j].rows[0].className="dragTR";
125
subTables[j].rows[0].attachEvent("onmousedown",dragStart);
126
subTables[j].attachEvent("ondrag",draging);
127
subTables[j].attachEvent("ondragend",dragEnd);
128
}
129
}
130
}
131
inint();
132![](/Images/OutliningIndicators/None.gif)
133
</script>
134
<script language="javascript" >
135
function init()
136![](/Images/OutliningIndicators/None.gif)
137![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
138![](/Images/OutliningIndicators/InBlock.gif)
139
readrss('http://singlepine.cnblogs.com/category/37642.html/rss','div10');
140
readrss('http://singlepine.cnblogs.com/category/37639.html/rss','div2');
141
readrss('http://singlepine.cnblogs.com/category/41822.html/rss','div5');
142
readrss('http://singlepine.cnblogs.com/category/37474.html/rss','div3');
143
readrss('http://singlepine.cnblogs.com/category/37630.html/rss','div4');
144
setTimeout("init()","1000");
145
}
146
</script>
147
</head>
148
<body onLoad="init()">
149
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
150
<tr >
151
<td width="25%" valgin="top">
152
<table border=0 class="dragTable" cellspacing="0">
153
<tr>
154
<td>AJAX</td>
155
</tr>
156
<tr>
157
<td id="div4"></td>
158
<tr>
159
</table>
160
<table border=0 class="dragTable" cellspacing="0">
161
<tr>
162
<td>datagrid</td>
163
</tr>
164
<tr>
165
<td id="div5"></td>
166
<tr>
167
</table>
168
<table border=0 class="dragTable" cellspacing="0">
169
<tr>
170
<td>asp.net</td>
171
</tr>
172
<tr>
173
<td id="div3"></td>
174
<tr>
175
</table></td>
176
<td width="25%">
177
<table border=0 class="dragTable" cellspacing="0">
178
<tr>
179
<td>C#.net</td>
180
</tr>
181
<tr>
182
<td id="div2" > </td>
183
<tr>
184
</table></td>
185
<td width="25%">
186
<table border=0 class="dragTable" cellspacing="0" id="td3">
187
<tr>
188
<td >javascrip<a href="#" onClick="document.all.td3.style.display='none'" onMouseDown="document.all.imag1.src='Icon2.gif'" onMouseUp="document.all.imag1.src='Icon.gif'" onFocus="this.blur()" ><img src="Icon.gif" width="16" height="14" id="imag1" border="0"></a></td>
189
</tr>
190
<tr>
191
<td id="dv" ><div id="div10" onClick="readrss('http://singlepine.cnblogs.com/category/37642.html/rss','dv');"></div></td>
192
<tr>
193
</table>
194
</td>
195
</tr>
196
</table>
197
<a href="#" onClick="div10.style.display='none'">隐藏</a>
198![](/Images/OutliningIndicators/None.gif)
199
200
201![](/Images/OutliningIndicators/None.gif)
202
<p> </p>
203
<p><hr></p>
204
<p>本程序由<font color="e666666"><b>Ajax中国</b></font>收集整理 <a href="http://www.okajax.com/" target="_blank">http://www.okajax.com</a></p>
205
<p><a href="http://www.okajax.com/bbs/board.aspx?boardid=9" target="_blank"> <img name="yanshi" src="http://www.okajax.com/images/1024.gif" border=0 alt="Ajax中国 在线演示"></a></p>
206
<p>本程序作者:Ajax技术联盟(qq群)成员╰☆明仔★~(155318676)</p>
207
<p></p>
208
</body>
209
</html>
210
211![](/Images/OutliningIndicators/None.gif)