您的位置：首页 > 编程语言 > Go语言

google个性化主页拖拽实现修正版本

2007-01-09 16:46 681 查看

google个性化主页拖拽实现修正版本

忙了两个月的时间.又可以做自己的工作了.上次写的还有很多问题.改进..并完成了读取rss的动作.保存用户信息等功能
js主要由几个部分组成:
1.drag.js:负责拖动的事件
2.dom.js:负责拖动过程中页面节点的变化
3.request.js:主要是读取rss响应的工作

下面是drag.js的部分代码:

drag.js的全部代码
1

/**//*
2

**************************************
3

* Author By BlackSoul *
4

* 2006-08-05 *
5

* BlackSoulylk@gmail.com *
6

* QQ:9136194 *
7

* http://blacksoul.cnblogs.cn *
8

**************************************
9

*/
10

var tx,ty;
11

var stepX,stepY;
12

//检查位置
14

var aim,module;
15

/**//*-----调用函数之前需要初始化aim为当前模块-----//
17

* var modules=[1,2,3,4,5,6];
18

* 其中数字代表模块id号.
19

* 主要位置div从左到右为"left","center","right"
20

* 页面当中模块名称为m_1,m_2,m_3

.
21

*/
22

function drag(parent,handle)

{
24

var clone,isNew=false;
25

var parentName = parent.getAttribute('id');
26

parent.firstChild.onmousedown=function()

{return false;};
27

handle.onselectstart = function()

{return false;};
28

handle.onmousedown=function(a)

{
29

aim = parent;
30

var newDiv = document.createElement("div");
31

newDiv.setAttribute('id','clone');
32

newDiv.style.display = "none";
33

document.body.appendChild(newDiv);
34

clone = document.getElementById("clone");
35

clone.style.width = 300;
37

clone.style.display = "none";
38

clone.style.position = "absolute";
39

clone.innerHTML = parent.innerHTML;
40

clone.style.zIndex = 10000;
42

clone.style.filter="alpha(opacity=70)";//ie hack
43

clone.style.opacity = 0.75;
44

var d=document;if(!a)a=window.event;
46

var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
47

if(parent.setCapture)
49

parent.setCapture();
50

else if(window.captureEvents)
51

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
52

d.onmousemove=function(a)

{
54

parent = document.getElementById(parent.getAttribute('id'));
55

if(!a)a=window.event;
56

if(!a.pageX)a.pageX=a.clientX;
57

if(!a.pageY)a.pageY=a.clientY;
58

tx=a.pageX-x-document.body.scrollLeft,ty=a.pageY-y+document.body.scrollTop;
59

clone.style.left = tx;
61

clone.style.top = ty;
62

clone.style.display = "block";
63

var aimLeft= aim.parentNode.offsetLeft;
65

var aimRight = aim.parentNode.offsetLeft + aim.offsetWidth;
66

var aimTop = aim.parentNode.offsetTop + aim.offsetTop - document.body.scrollTop;
67

var aimbottom = aim.parentNode.offsetTop + aim.offsetTop + aim.offsetHeight - document.body.scrollTop;
68

//这里检测处于目标当中则处理事件
70

if(a.pageX >= aimLeft && a.pageX <= aimRight
71

&& a.pageY >= aimTop && a.pageY <= aimbottom)
72

{//处于当前块当中
73

appendAfter(aim.getAttribute('id'),parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
75

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
76

deleteNode(parent.getAttribute('id'));
77

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
78

aim = document.getElementById(parent.getAttribute('id'));
79

return;
80

}
82

else
83

{//否则检测属于哪个模块
84

for(var i = 0;i < modules.length; i++)
85

{
86

module = document.getElementById("m_"+modules[i]);
87

if(a.pageX >= module.parentNode.offsetLeft && a.pageX <= (module.parentNode.offsetLeft + module.offsetWidth)
88

&& a.pageY >= (module.parentNode.offsetTop + module.offsetTop - document.body.scrollTop)&& a.pageY <= (module.parentNode.offsetTop + module.offsetTop + module.offsetHeight - document.body.scrollTop))
89

{//处于当前块当中
90

appendBefore(module.getAttribute('id'),parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
91

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
92

deleteNode(parent.getAttribute('id'));
93

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
94

aim = module;
95

return;
96

}
97

}
98

//不属于任何一个位置,属于当前区域之外
100

var left = document.getElementById("left");
101

var center = document.getElementById("center");
102

var right = document.getElementById("right");
103

104

//左右属于left 上下不属于left
105

if(a.pageX >= left.offsetLeft && a.pageX <= (left.offsetLeft + left.offsetWidth)
106

&& a.pageY >= (left.offsetTop + left.offsetHeight + document.body.scrollTop))
107

{
108

appendLast("left",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
109

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
110

deleteNode(parent.getAttribute('id'));
111

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
112

aim = document.getElementById(parent.getAttribute('id'));
113

return;
114

}
115

116

if(a.pageX >= left.offsetLeft && a.pageX <= (left.offsetLeft + left.offsetWidth)
117

&& a.pageY <= left.offsetTop + document.body.scrollTop)
118

{
119

appendFirst("left",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
120

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
121

deleteNode(parent.getAttribute('id'));
122

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
123

aim = document.getElementById(parent.getAttribute('id'));
124

return;
125

}
126

127

//左右属于center 上不属于center
128

if(a.pageX >= center.offsetLeft && a.pageX <= (center.offsetLeft + center.offsetWidth)
129

&& a.pageY >= (center.offsetTop + center.offsetHeight+ document.body.scrollTop))
130

{
131

appendLast("center",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
132

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
133

deleteNode(parent.getAttribute('id'));
134

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
135

aim = document.getElementById(parent.getAttribute('id'));
136

return;
137

}
138

139

if(a.pageX >= center.offsetLeft && a.pageX <= (center.offsetLeft + center.offsetWidth)
140

&& a.pageY <= center.offsetTop + document.body.scrollTop)
141

{
142

appendFirst("center",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
143

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
144

deleteNode(parent.getAttribute('id'));
145

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
146

aim = document.getElementById(parent.getAttribute('id'));
147

return;
148

}
149

150

//左右属于right 上不属于right
151

if(a.pageX >= right.offsetLeft && a.pageX <= (right.offsetLeft + right.offsetWidth)
152

&& a.pageY >= (right.offsetTop + right.offsetHeight+ document.body.scrollTop))
153

{
154

appendLast("right",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
155

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
156

deleteNode(parent.getAttribute('id'));
157

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
158

aim = document.getElementById(parent.getAttribute('id'));
159

return;
160

}
161

162

if(a.pageX >= right.offsetLeft && a.pageX <= (right.offsetLeft + right.offsetWidth)
163

&& a.pageY <= right.offsetTop + document.body.scrollTop)
164

{
165

appendFirst("right",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
166

document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
167

deleteNode(parent.getAttribute('id'));
168

document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
169

aim = document.getElementById(parent.getAttribute('id'));
170

return;
171

}
172

}
173

174

};
175

176

d.onmouseup=function(a)

{
177

if(!a)a=window.event;
178

if(!a.pageX)a.pageX=a.clientX;
179

if(!a.pageY)a.pageY=a.clientY;
180

tx=a.pageX-x,ty=a.pageY-y;
181

182

clone.style.left = tx;
183

clone.style.top = ty;
184

clone.style.zIndex = 1;
185

clone.style.filter="alpha(opacity=100)";//ie hack
186

clone.style.opacity = 1;
187

188

if(parent.releaseCapture)
189

parent.releaseCapture();
190

else if(window.captureEvents)
191

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
192

d.onmousemove=null;
193

d.onmouseup=null;
194

195

document.getElementById(parent.getAttribute('id')).style.border="1px dashed #999999";
196

//重新注册新节点事件
197

drag(document.getElementById(parent.getAttribute('id')),document.getElementById(handle.getAttribute('id')));
198

document.body.removeChild(clone);
199

// alert("readRss.aspx?left="+getPosition("left")+"&right="+getPosition("right")+"¢er="+getPosition("center"));
200

send("Repos.aspx?left="+getPosition("left")+"&right="+getPosition("right")+"¢er="+getPosition("center"));
201

};
202

};
203

}
已经发现的bug:以上代码可以在ff下面运行,但是有一个关于坐标的问题,ff的层总是把第一行的y轴当作它自己的y轴..不解..这个是一个bug,
页面当中调用需要注册层,并且设定三个框架层("left","center","right"),如下:

<asp:TextBox ID="tbRssFeeds" runat="server" EnableViewState="False"></asp:TextBox>

<asp:Button ID="addFeeds" runat="server" Text="添加RSS" OnClick="addFeeds_Click" EnableViewState="False" />

</form>

<asp:Literal ID="leftSub" runat="server"></asp:Literal>

</div>

<asp:Literal ID="centerSub" runat="server"></asp:Literal>

</div>

<asp:Literal ID="rightSub" runat="server"></asp:Literal>

</div>

<hr/>

Author:BlackSoul

</div>

</div>

页面框架好的了之后就是注册事件

modules=[1138572788,1028124506,1400846246,1102454511,1498854668,1446864555,1177172025,1126220777];window.onload=function()

{drag(document.getElementById('m_1138572788'),document.getElementById('mh_1138572788'));send_request("getRss.aspx?url=http://game.yesky.com/index.xml",'c_1138572788');drag(document.getElementById('m_1028124506'),document.getElementById('mh_1028124506'));send_request("getRss.aspx?url=http://myhard.yesky.com/index.xml",'c_1028124506');drag(document.getElementById('m_1400846246'),document.getElementById('mh_1400846246'));send_request("getRss.aspx?url=http://community.csdn.net/IndexPage/HotLife/HotLife.xml",'c_1400846246');drag(document.getElementById('m_1102454511'),document.getElementById('mh_1102454511'));send_request("getRss.aspx?url=http://rss.xinhuanet.com/rss/it.xml",'c_1102454511');drag(document.getElementById('m_1498854668'),document.getElementById('mh_1498854668'));send_request("getRss.aspx?url=http://www.techtarget.com.cn/index.xml",'c_1498854668');drag(document.getElementById('m_1446864555'),document.getElementById('mh_1446864555'));send_request("getRss.aspx?url=http://column.chinabyte.com/index.xml",'c_1446864555');drag(document.getElementById('m_1177172025'),document.getElementById('mh_1177172025'));send_request("getRss.aspx?url=http://e.yesky.com/index.xml",'c_1177172025');drag(document.getElementById('m_1126220777'),document.getElementById('mh_1126220777'));send_request("getRss.aspx?url=http://telecom.chinabyte.com/index.xml",'c_1126220777');};

window.onerror = function()

{return true;}

</script>

基本实现了google的定制rss,但是google的module还不能加载...下一步准备实现..
拖拽的代码效果可以查看http://blacksoulylk.googlepages.com/drag.html
aspx读取RSS可以到http://blacksoulylk.googlepages.com/PersonalPage.rar去下载
在下的.net功底比较差,读取rss不知有什么好的方法没有..希望各位大侠不吝赐教
找到一个.net免费空间部署成功:http://www.onlinegf.com/users/blacksoul/ 添加你自己的rss就可以构建你的个性化页面了

----------------------------------

http://www.google.com

http://www.dodoor.cn/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航