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 };
