1 //普通拖拽
2 /*
3 * CSS
4 */
5 #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
6
7 /*
8 *HTML
9 */
10 <div id="div1"></div>
11
12
13 /*
14 *JavaScript
15 */
16 window.onload = function (){
17 var oDiv = document.getElementById("div1");
18 oDiv.onmousedown = function(ev){
19 var oEvent = ev || event; //事件处理函数 ev是FF
20 var disX = oEvent.clientX - oDiv.offsetLeft;
21 var disY = oEvent.clientY - oDiv.offsetTop;
22 doucment.onmousemove = function (ev){
23 var oEvent = ev || event;
24 var l = oEvent.clientX - this.disX;
25 var t = oEvent.clientY - this.disY;
26 oDiv.style.left = l + "px";
27 oDiv.style.top = t + "px";
28 document.title = l + " , " + t; //坐标
29 return false; //阻止火狐默认事件
30 }
31 document.onmouseup = function (){
32 document.onmousemove = null;
33 document.onmouseup = null;
34 }
35 }
36 }
1 //面向对象拖拽
2 /*
3 *CSS
4 */
5 #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
6 #div2{ width:100px; height:100px; position:absolute; background:yellow; cursor:pointer;}
7
8 /*
9 *HTML
10 */
11 <div id="div1"></div>
12 <div id="div2"></div>
13
14 /*
15 *Javascript
16 */
17 window.onload = function (){
18
19 new Darg("div1");
20 new Darg("div2");
21
22 }
23 function Darg(id){
24 var _this = this;
25 this.oDiv = document.getElementById(id);
26 this.oDiv.onmousedown = function (ev){
27 _this.ondown(ev);
28 }
29 }
30 Darg.prototype.ondown = function(ev){
31 var _this = this;
32 var oEvent = ev || event;
33 this.disX = oEvent.clientX - this.oDiv.offsetLeft;
34 this.disY = oEvent.clientY - this.oDiv.offsetTop;
35 document.onmousemove = function (ev){
36 _this.onmove(ev);
37 }
38 document.onmouseup = function (){
39 _this.onup();
40 }
41 }
42 Darg.prototype.onmove = function(ev){
43 var oEvent = ev || event;
44 var l = oEvent.clientX - this.disX;
45 var t = oEvent.clientY - this.disY;
46 this.oDiv.style.left = l + "px";
47 this.oDiv.style.top = t + "px";
48 document.title = l + " , " + t;
49 return false;
50 }
51 Darg.prototype.onup = function(){
52 document.onmousemove = null;
53 document.onmouseup = null;
54 }
1 //面向对象拖拽-继承
2 /*
3 *CSS
4 */
5 #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
6 #div2{ width:100px; height:100px; position:absolute; background:yellow; cursor:pointer;}
7
8 /*
9 *HTML
10 */
11 <div id="div1"></div>
12 <div id="div2"></div>
13
14 /*
15 *Javascript
16 */
17 window.onload = function (){
18
19 new Darg("div1");
20 new extendsDarg("div2");
21
22 }
23 //面向对象拖拽开始
24 function Darg(id){
25 var _this = this;
26 this.oDiv = document.getElementById(id);
27 this.oDiv.onmousedown = function (ev){
28 _this.ondown(ev);
29 }
30 }
31 Darg.prototype.ondown = function(ev){
32 var _this = this;
33 var oEvent = ev || event;
34 this.disX = oEvent.clientX - this.oDiv.offsetLeft;
35 this.disY = oEvent.clientY - this.oDiv.offsetTop;
36 document.onmousemove = function (ev){
37 _this.onmove(ev);
38 }
39 document.onmouseup = function (){
40 _this.onup();
41 }
42 }
43 Darg.prototype.onmove = function(ev){
44 var oEvent = ev || event;
45 var l = oEvent.clientX - this.disX;
46 var t = oEvent.clientY - this.disY;
47 this.oDiv.style.left = l + "px";
48 this.oDiv.style.top = t + "px";
49 document.title = l + " , " + t;
50 return false;
51 }
52 Darg.prototype.onup = function(){
53 document.onmousemove = null;
54 document.onmouseup = null;
55 }
56 //面向对象拖拽结束
57
58 //这里开始继承
59 function extendsDarg(id){
60 Darg.call(this,id);
61 }
62 for(i in Darg.prototype){
63 extendsDarg.prototype[i] = Darg.prototype[i];
64 }
65 extendsDarg.prototype.onmove = function(ev){
66 var oEvent = ev || event;
67 var l = oEvent.clientX - this.disX;
68 var t = oEvent.clientY - this.disY;
69 if(l<0){
70 l = 0;
71 }else if(l>document.documentElement.clientWidth - this.oDiv.offsetWidth){
72 l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
73 }
74 if(t<0){
75 t = 0;
76 }else if(t>document.documentElement.clientHeight - this.oDiv.offsetHeight){
77 t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
78 }
79 this.oDiv.style.left = l + "px";
80 this.oDiv.style.top = t + "px";
81 document.title = l + " , " + t;
82 return false;
83 }
