面向对象写法的拖拽

  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>

相关阅读:
第二次，营造完整的人生(上)
御风者（二）——狼王
 我的个人博客
 FTP 协议解析
 关于 Wireshark3 中 GeoIP 的问题
 CentOS8 NextCloud 私有云存储搭建
 Windows10 临时将线程绑定至指定CPU的方法
 CentOS8 yum/dnf 配置国内源(临时)
Cknife流量分析
 samba + OPENldap 搭建文件共享服务器
原文地址：https://www.cnblogs.com/wanqiu/p/4614603.html