js拖拽效果的实现

1、最基础的写法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 {width:200px; height:200px; background:yellow; position:absolute;}
 8 </style>
 9 <script>
10 window.onload=function ()
11 {
12     var oDiv=document.getElementById('div1');
13     
14     oDiv.onmousedown=function (ev)
15     {
16         var oEvent=ev||event;
17         
18         var disX=oEvent.clientX-oDiv.offsetLeft;
19         var disY=oEvent.clientY-oDiv.offsetTop;
20         
21         document.onmousemove=function (ev)
22         {
23             var oEvent=ev||event;
24             
25             oDiv.style.left=oEvent.clientX-disX+'px';
26             oDiv.style.top=oEvent.clientY-disY+'px';
27         };
28         
29         document.onmouseup=function ()
30         {
31             document.onmousemove=null;
32             document.onmouseup=null;
33         };
34     };
35 };
36 </script>
37 </head>
38 <body>
39 <div id="div1"></div>
40 </body>
41 </html>

2、相比较高级的写法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 {width:200px; height:200px; background:yellow; position:absolute;}
 8 </style>
 9 <script>
10 var oDiv=null;
11 var disX=0;
12 var disY=0;
13 
14 window.onload=function ()
15 {
16     oDiv=document.getElementById('div1');
17     
18     oDiv.onmousedown=fnDown;
19 };
20 
21 function fnDown(ev)
22 {
23     var oEvent=ev||event;
24     
25     disX=oEvent.clientX-oDiv.offsetLeft;
26     disY=oEvent.clientY-oDiv.offsetTop;
27     
28     document.onmousemove=fnMove;
29     document.onmouseup=fnUp;
30 }
31 
32 function fnMove(ev)
33 {
34     var oEvent=ev||event;
35     
36     oDiv.style.left=oEvent.clientX-disX+'px';
37     oDiv.style.top=oEvent.clientY-disY+'px';
38 }
39 
40 function fnUp()
41 {
42     document.onmousemove=null;
43     document.onmouseup=null;
44 }
45 </script>
46 </head>
47 
48 <body>
49 <div id="div1"></div>
50 </body>
51 </html>

3、

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:yellow; position:absolute;}
#div2 {width:200px; height:200px; background:green; position:absolute;}
</style>
<script src="Drag.js"></script>
<script src="LimitDrag.js"></script>
<script>
window.onload=function ()
{
    new Drag('div1');
    new LimitDrag('div2');
};
</script>
</head>

<body>
<div id="div1">普通拖拽</div>
<div id="div2">限制范围</div>
</body>
</html>

Dray.js

 1 function Drag(id)
 2 {
 3     var _this=this;
 4     this.disX=0;
 5     this.disY=0;
 6     
 7     this.oDiv=document.getElementById(id);
 8     this.oDiv.onmousedown=function (ev)
 9     {
10         _this.fnDown(ev);
11         
12         return false;
13     };
14 };
15 
16 Drag.prototype.fnDown=function (ev)
17 {
18     var _this=this;
19     var oEvent=ev||event;
20     
21     this.disX=oEvent.clientX-this.oDiv.offsetLeft;
22     this.disY=oEvent.clientY-this.oDiv.offsetTop;
23     
24     document.onmousemove=function (ev)
25     {
26         _this.fnMove(ev);
27     };
28     document.onmouseup=function ()
29     {
30         _this.fnUp();
31     };
32 };
33 
34 Drag.prototype.fnMove=function (ev)
35 {
36     var oEvent=ev||event;
37     
38     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
39     this.oDiv.style.top=oEvent.clientY-this.disY+'px';
40 };
41 
42 Drag.prototype.fnUp=function ()
43 {
44     document.onmousemove=null;
45     document.onmouseup=null;
46 };

LimitDrag.js

 1 function LimitDrag(id)
 2 {
 3     Drag.call(this, id);    //继承属性
 4 }
 5 
 6 for(var i in Drag.prototype)
 7 {
 8     LimitDrag.prototype[i]=Drag.prototype[i];
 9 }
10 
11 LimitDrag.prototype.fnMove=function (ev)
12 {
13     var oEvent=ev||event;
14     var l=oEvent.clientX-this.disX;
15     var t=oEvent.clientY-this.disY;
16     
17     if(l<0)
18     {
19         l=0;
20     }
21     else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
22     {
23         l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
24     }
25     
26     this.oDiv.style.left=l+'px';
27     this.oDiv.style.top=t+'px';
28 };