js組件化 2 拖拽

時間 2019-11-18
原文原文鏈接
<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>test</title>  
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  <style>
       #div1{
    width: 100px;
    height: 100px;
    background: red;
    cursor: move;
    position:absolute;
    left:0;
    top: 0;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: black;
            cursor: move;
            position:absolute;
            left:100px;
            top: 0;
        }
        #div3{
            width: 100px;
            height: 100px;
            background: blue;
            cursor: move;
            position:absolute;
            left:200px;
            top: 0;
        }
  </style>
  <script>  

                window.onload=function(){
                    var oDiv1=new Drag();
                    oDiv1.init({ id:'div1'});
                
                    var oDiv2=new Drag();
                    oDiv2.init({ id:'div2',fD:function(){ document.title="hi" }});
                
                    var oDiv3=new Drag();
                    oDiv3.init({
                        id:'div3',
                        fD:function(){
                        document.title='jerry'
                    },
                        fU:function(){
                        document.title='byebye'
                    }
                    });
                }
                
            
                function Drag(){ this.oDiv=null;this.disX=0;this.disY=0;this.settings={fD:function(){},fU:function(){} }};
                
          Drag.prototype.init=function(opt){
                          var _this=this;
                          extend(this.settings,opt);
                          this.oDiv = document.getElementById(opt.id);
                          this.oDiv.onmousedown=function(ev){
                               var ev = ev||window.event;
                               _this.fnDown(ev);
                               _this.settings.fD();
                               
                               document.onmousemove = function(ev){var ev=ev||window.event;_this.fnMove(ev);};
                               document.onmouseup = function(){_this.fnUp();_this.settings.fU();};
                               return false;
                        }
          };
               Drag.prototype.fnDown=function (ev){var ev=ev||window.event;this.disX=ev.clientX-this.oDiv.offsetLeft;this.disY=ev.clientY-this.oDiv.offsetTop;};
                
                Drag.prototype.fnMove = function(ev){this.oDiv.style.left=ev.clientX-this.disX+'px';this.oDiv.style.top=ev.clientY-this.disY+'px';};
                
                Drag.prototype.fnUp = function(){document.onmousedown=null;document.onmousemove=null;}

                function extend(obj1,obj2){for (var i in obj2){ obj1[i]=obj2[i];}}
                
</script>
 
 
</head>  
<body>  
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
</body>  
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。