Google Maps API的库JS文件分析(6) -拖放支持
在Google Maps API提供的JS文件中,引用了一个后台的JS库文件,该文件针对不同的浏览器有三个版本,这几天因为我想给我的Google Map扩展一些功能,所以研究了这个文件,我现在正打算陆续将我注释过的该文件放在网上,该文件一共有7000多行,我会分段渐渐的注释出来,我是按照分类注释的,所以并不会按照该JS文件顺序。
该文件Google作了处理,所有的变量名都被处理成了简单的a,b,c,d之类,所以理解起来比较费劲。
该JS文件是以IE版本的http://maps.google.com/mapfiles/maps.21.js来分析的,其他的几个我觉得基本的架构也应该差不多,所以我没有仔细看,实际上,这个文件Google也会不停的更新(在我写这个文章的时候,我发现Google已经更新到maps.25.js了),不过我想架构上也不会有太大的变动吧。
由于该文件是在比较复杂,所以难免会出现理解错误的情况,请谅解!
下面是第6个(这个是拖放支持的对象):
1//一个用来响应拖放操作的层对象
2 function da(a,b,c,d)
3 {
4 this.src=a; //拖放操作源
5 this.container=d;
6 this.disabled=false; //是否禁用
7 this.dragPoint=new r(0,0); //当前拖动到的位置
8 this.dragging=false; //是否正在被拖动中
9 this.clickStartPos=new r(0,0); //拖动起始点坐标
10 this.src.style.position="absolute";
11 this.moveTo(b!=null?b:a.offsetLeft,c!=null?c:a.offsetTop); //将该层和源重叠
12 this.mouseDownHandler=j.createAdapter(this,this.onMouseDown);
13 this.mouseMoveHandler=j.createAdapter(this,this.onMouseMove);
14 this.mouseUpHandler=j.createAdapter(this,this.onMouseUp);
15 if(t.type==2)
16 {
17 j.bindDom(window,"mouseout",this,this.onWindowMouseOut)
18 }
19 this.eventSrc=this.src.setCapture?this.src:window;
20 j.addBuiltInListener(this.src,"mousedown",this.mouseDownHandler);
21 j.bindDom(this.src,"mouseup",this,this.onDisabledMouseUp);
22 j.bindDom(this.src,"click",this,this.onDisabledClick)
23 }
24//移动到(a,b)点
25 da.prototype.moveTo=function(a,b)
26 {
27 if(this.left!=a||this.top!=b)
28 {
29 this.left=a;
30 this.top=b;
31 this.src.style.left=this.left+"px";
32 this.src.style.top=this.top+"px";
33 j.trigger(this,"move")
34 }
35 };
36//当操作源被点击时,如果层没有被禁用,则触发层被点击事件?
37 da.prototype.onDisabledClick=function(a)
38 {
39 if(this.disabled)
40 {
41 j.trigger(this,"click",a)
42 }
43 };
44//当操作源发生mouseup事件时如果层没有被禁用,则触发层mouseup事件
45 da.prototype.onDisabledMouseUp=function(a)
46 {
47 if(this.disabled)
48 {
49 j.trigger(this,"mouseup",a)
50 }
51 };
52//当操作源发生mousedown事件时如果层没有被禁用,则触发层mousedown事件
53 da.prototype.onMouseDown=function(a)
54 {
55 j.trigger(this,"mousedown",a);
56 if(a.cancelDrag)
57 {
58 return
59 }
60 var b=a.button==0||a.button==1;
61 if(this.disabled||!b)
62 {
63 B(a); //中止事件a的执行
64 return false
65 }
66 this.dragPoint.x=a.clientX;
67 this.dragPoint.y=a.clientY;
68 this.dragging=true;
69 j.addBuiltInListener(this.eventSrc,"mousemove",this.mouseMoveHandler);
70 j.addBuiltInListener(this.eventSrc,"mouseup",this.mouseUpHandler);
71 if(this.src.setCapture)
72 {
73 this.src.setCapture() //给源发出源事件被捕获通知,不过这个方法在整个文件中没有被定义
74 }
75 this.clickStartTime=(new Date()).getTime();
76 this.clickStartPos.x=a.clientX;
77 this.clickStartPos.y=a.clientY;
78 j.trigger(this,"dragstart"); //拖动开始
79 this.originalCursor=this.src.style.cursor; //记录原来的鼠标样式
80 G(this.src,"move"); //将操作源的鼠标样式变为"Move"
81 B(a) //中止事件a的执行
82 };
83//移动或拖动时持续触发
84 da.prototype.onMouseMove=function(a)
85 {
86 if(t.os==1)
87 {
88 if(a==null)
89 {
90 return
91 }
92 if(this.dragDisabled)
93 {
94 this.savedMove=new Object();
95 this.savedMove.clientX=a.clientX;
96 this.savedMove.clientY=a.clientY;
97 return
98 }
99 qa(this,function()
100 {
101 this.dragDisabled=false;
102 this.onMouseMove(this.savedMove)
103 }
104 ,30); //30秒后执行该操作,实际上就是30毫秒内禁止执行onMouseMove操作,以便不影响性能
105 this.dragDisabled=true;
106 this.savedMove=null
107 }
108 var b=this.left+(a.clientX-this.dragPoint.x);
109 var c=this.top+(a.clientY-this.dragPoint.y);
110 var d=0;
111 var e=0;
112 if(this.container) //防止超出container边界
113 {
114 var f=b;
115 if(b<this.container.minX)
116 {
117 f=this.container.minX
118 }
119 else
120 {
121 var i=this.container.maxX-this.src.offsetWidth;
122 if(b>i)
123 {
124 f=i
125 }
126 }
127 d=f-b;
128 b=f;
129 var g=c;
130 if(c<this.container.minY)
131 {
132 g=this.container.minY
133 }
134 else
135 {
136 var h=this.container.maxY-this.src.offsetHeight;
137 if(c>h)g=h
138 }
139 e=g-c;
140 c=g
141 }
142 this.moveTo(b,c);
143 this.dragPoint.x=a.clientX+d;
144 this.dragPoint.y=a.clientY+e;
145 j.trigger(this,"drag")
146 };
147 da.prototype.onMouseUp=function(a)
148 {
149 j.trigger(this,"mouseup",a);
150 j.removeBuiltInListener(this.eventSrc,"mousemove",this.mouseMoveHandler); //结束事件捕获
151 j.removeBuiltInListener(this.eventSrc,"mouseup",this.mouseUpHandler);
152 this.dragging=false;
153 G(this.src,this.originalCursor); //还原鼠标样式
154 if(document.releaseCapture) //完成捕获,这个函数并没有在系统中定义
155 {
156 document.releaseCapture()
157 }
158 j.trigger(this,"dragend");
159 var b=(new Date()).getTime();
160 if(b-this.clickStartTime<=500&&(Math.abs(this.clickStartPos.x-a.clientX)<=2&&Math.abs(this.clickStartPos.y-a.clientY)<=2))
161 {
162 j.trigger(this,"click",a) //如果时间较短,并且距离比较近,则认为是双击
163 }
164 };
165//鼠标离开层则触发结束拖动操作
166 da.prototype.onWindowMouseOut=function(a)
167 {
168 if(!a.relatedTarget&&this.dragging)
169 {
170 this.onMouseUp(a)
171 }
172 };
173//禁用拖放
174 da.prototype.disable=function()
175 {
176 this.disabled=true
177 };
178//启用拖放
179 da.prototype.enable=function()
180 {
181 this.disabled=false
182 };
2 function da(a,b,c,d)
3 {
4 this.src=a; //拖放操作源
5 this.container=d;
6 this.disabled=false; //是否禁用
7 this.dragPoint=new r(0,0); //当前拖动到的位置
8 this.dragging=false; //是否正在被拖动中
9 this.clickStartPos=new r(0,0); //拖动起始点坐标
10 this.src.style.position="absolute";
11 this.moveTo(b!=null?b:a.offsetLeft,c!=null?c:a.offsetTop); //将该层和源重叠
12 this.mouseDownHandler=j.createAdapter(this,this.onMouseDown);
13 this.mouseMoveHandler=j.createAdapter(this,this.onMouseMove);
14 this.mouseUpHandler=j.createAdapter(this,this.onMouseUp);
15 if(t.type==2)
16 {
17 j.bindDom(window,"mouseout",this,this.onWindowMouseOut)
18 }
19 this.eventSrc=this.src.setCapture?this.src:window;
20 j.addBuiltInListener(this.src,"mousedown",this.mouseDownHandler);
21 j.bindDom(this.src,"mouseup",this,this.onDisabledMouseUp);
22 j.bindDom(this.src,"click",this,this.onDisabledClick)
23 }
24//移动到(a,b)点
25 da.prototype.moveTo=function(a,b)
26 {
27 if(this.left!=a||this.top!=b)
28 {
29 this.left=a;
30 this.top=b;
31 this.src.style.left=this.left+"px";
32 this.src.style.top=this.top+"px";
33 j.trigger(this,"move")
34 }
35 };
36//当操作源被点击时,如果层没有被禁用,则触发层被点击事件?
37 da.prototype.onDisabledClick=function(a)
38 {
39 if(this.disabled)
40 {
41 j.trigger(this,"click",a)
42 }
43 };
44//当操作源发生mouseup事件时如果层没有被禁用,则触发层mouseup事件
45 da.prototype.onDisabledMouseUp=function(a)
46 {
47 if(this.disabled)
48 {
49 j.trigger(this,"mouseup",a)
50 }
51 };
52//当操作源发生mousedown事件时如果层没有被禁用,则触发层mousedown事件
53 da.prototype.onMouseDown=function(a)
54 {
55 j.trigger(this,"mousedown",a);
56 if(a.cancelDrag)
57 {
58 return
59 }
60 var b=a.button==0||a.button==1;
61 if(this.disabled||!b)
62 {
63 B(a); //中止事件a的执行
64 return false
65 }
66 this.dragPoint.x=a.clientX;
67 this.dragPoint.y=a.clientY;
68 this.dragging=true;
69 j.addBuiltInListener(this.eventSrc,"mousemove",this.mouseMoveHandler);
70 j.addBuiltInListener(this.eventSrc,"mouseup",this.mouseUpHandler);
71 if(this.src.setCapture)
72 {
73 this.src.setCapture() //给源发出源事件被捕获通知,不过这个方法在整个文件中没有被定义
74 }
75 this.clickStartTime=(new Date()).getTime();
76 this.clickStartPos.x=a.clientX;
77 this.clickStartPos.y=a.clientY;
78 j.trigger(this,"dragstart"); //拖动开始
79 this.originalCursor=this.src.style.cursor; //记录原来的鼠标样式
80 G(this.src,"move"); //将操作源的鼠标样式变为"Move"
81 B(a) //中止事件a的执行
82 };
83//移动或拖动时持续触发
84 da.prototype.onMouseMove=function(a)
85 {
86 if(t.os==1)
87 {
88 if(a==null)
89 {
90 return
91 }
92 if(this.dragDisabled)
93 {
94 this.savedMove=new Object();
95 this.savedMove.clientX=a.clientX;
96 this.savedMove.clientY=a.clientY;
97 return
98 }
99 qa(this,function()
100 {
101 this.dragDisabled=false;
102 this.onMouseMove(this.savedMove)
103 }
104 ,30); //30秒后执行该操作,实际上就是30毫秒内禁止执行onMouseMove操作,以便不影响性能
105 this.dragDisabled=true;
106 this.savedMove=null
107 }
108 var b=this.left+(a.clientX-this.dragPoint.x);
109 var c=this.top+(a.clientY-this.dragPoint.y);
110 var d=0;
111 var e=0;
112 if(this.container) //防止超出container边界
113 {
114 var f=b;
115 if(b<this.container.minX)
116 {
117 f=this.container.minX
118 }
119 else
120 {
121 var i=this.container.maxX-this.src.offsetWidth;
122 if(b>i)
123 {
124 f=i
125 }
126 }
127 d=f-b;
128 b=f;
129 var g=c;
130 if(c<this.container.minY)
131 {
132 g=this.container.minY
133 }
134 else
135 {
136 var h=this.container.maxY-this.src.offsetHeight;
137 if(c>h)g=h
138 }
139 e=g-c;
140 c=g
141 }
142 this.moveTo(b,c);
143 this.dragPoint.x=a.clientX+d;
144 this.dragPoint.y=a.clientY+e;
145 j.trigger(this,"drag")
146 };
147 da.prototype.onMouseUp=function(a)
148 {
149 j.trigger(this,"mouseup",a);
150 j.removeBuiltInListener(this.eventSrc,"mousemove",this.mouseMoveHandler); //结束事件捕获
151 j.removeBuiltInListener(this.eventSrc,"mouseup",this.mouseUpHandler);
152 this.dragging=false;
153 G(this.src,this.originalCursor); //还原鼠标样式
154 if(document.releaseCapture) //完成捕获,这个函数并没有在系统中定义
155 {
156 document.releaseCapture()
157 }
158 j.trigger(this,"dragend");
159 var b=(new Date()).getTime();
160 if(b-this.clickStartTime<=500&&(Math.abs(this.clickStartPos.x-a.clientX)<=2&&Math.abs(this.clickStartPos.y-a.clientY)<=2))
161 {
162 j.trigger(this,"click",a) //如果时间较短,并且距离比较近,则认为是双击
163 }
164 };
165//鼠标离开层则触发结束拖动操作
166 da.prototype.onWindowMouseOut=function(a)
167 {
168 if(!a.relatedTarget&&this.dragging)
169 {
170 this.onMouseUp(a)
171 }
172 };
173//禁用拖放
174 da.prototype.disable=function()
175 {
176 this.disabled=true
177 };
178//启用拖放
179 da.prototype.enable=function()
180 {
181 this.disabled=false
182 };
posted on 2005-10-24 09:50 K_Reverter 阅读(848) 评论(0) 编辑 收藏 举报