1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 #div1{ width:100px; height:100px; background:red; position:absolute;}
8 </style>
9 <script>
10
11 /*window.onload = function(){
12 var oDiv = document.getElementById('div1');
13
14 var disX = 0;
15 var disY = 0;
16
17 oDiv.onmousedown = function(ev){
18 var ev = ev || window.event;
19 disX = ev.clientX - oDiv.offsetLeft;
20 disY = ev.clientY - oDiv.offsetTop;
21
22 document.onmousemove = function(ev){
23 var ev = ev || window.event;
24 oDiv.style.left = ev.clientX - disX + 'px';
25 oDiv.style.top = ev.clientY - disY + 'px';
26 };
27
28 document.onmouseup = function(){
29 document.onmousemove = null;
30 document.onmouseup = null;
31 };
32 return false;
33 };
34
35 };*/
36
37 //先变型
38
39 /*var oDiv = null;
40 var disX = 0;
41 var disY = 0;
42
43 window.onload = function(){
44 oDiv = document.getElementById('div1');
45
46 init();
47
48 };
49
50 function init(){
51 oDiv.onmousedown = fnDown;
52 }
53
54 function fnDown(ev){
55 var ev = ev || window.event;
56 disX = ev.clientX - oDiv.offsetLeft;
57 disY = ev.clientY - oDiv.offsetTop;
58
59 document.onmousemove = fnMove;
60 document.onmouseup = fnUp;
61
62 return false;
63 }
64 function fnMove(ev){
65 var ev = ev || window.event;
66 oDiv.style.left = ev.clientX - disX + 'px';
67 oDiv.style.top = ev.clientY - disY + 'px';
68 }
69 function fnUp(){
70 document.onmousemove = null;
71 document.onmouseup = null;
72 }*/
73
74
75 //改面向对象: 除了注意THIS的指向问题，还得注意 事件对象 event 的传递
76
77 window.onload = function(){
78
79 var d1 = new Drag('div1');
80 d1.init();
81
82 };
83
84 function Drag(id){
85 this.oDiv = document.getElementById(id);
86 this.disX = 0;
87 this.disY = 0;
88 }
89 Drag.prototype.init = function(){
90
91 var This = this;
92
93 this.oDiv.onmousedown = function(ev){
94 var ev = ev || window.event;
95 This.fnDown(ev);
96 return false;
97 };
98 };
99 Drag.prototype.fnDown = function(ev){
100
101 var This = this;
102 this.disX = ev.clientX - this.oDiv.offsetLeft;
103 this.disY = ev.clientY - this.oDiv.offsetTop;
104
105 document.onmousemove = function(ev){
106 var ev = ev || window.event;
107 This.fnMove(ev);
108 };
109 document.onmouseup = this.fnUp;
110
111 };
112 Drag.prototype.fnMove = function(ev){
113 this.oDiv.style.left = ev.clientX - this.disX + 'px';
114 this.oDiv.style.top = ev.clientY - this.disY + 'px';
115 };
116 Drag.prototype.fnUp = function(){
117 document.onmousemove = null;
118 document.onmouseup = null;
119 };
120
121 </script>
122 </head>
123
124 <body>
125 <div id="div1"></div>
126 </body>
127 </html>
