js原生面向对象拖拽

css代码：

     #box2{
      width:300px;
      height:300px;
      line-height:300px;
      text-align: center;
      background-color:#62B6F4;
      clear:both;
      float: left;
     }

　　js代码：

  function test(){
    var drag = new Drag('box2');
    drag.init();
  }
  function Drag(id){
   this.obj = document.getElementById(id);
   this.disx;
   this.disy;
  };
  Drag.prototype.init = function(){
    var me = this;
    this.obj.onmousedown = function(e){
      var e = e || event;
      me.mouseDown(e);
      return false;
    };
  }
  Drag.prototype.mouseDown = function(e){
   var me =this;
   this.disx = e.clientX - this.obj.offsetLeft;
   this.disy = e.clientY - this.obj.offsetTop;
   document.onmousemove = function(e){
    var e = e || event;
    me.mouseMove(e);

   };
   document.onmouseup = function(e){
    var e =e || event;
    me.mouseup(e);
   }

  };
  Drag.prototype.mouseMove = function(e){
    this.obj.style.marginLeft = (e.clientX - this.disx) + 'px';
    this.obj.style.marginTop = (e.clientY - this.disy) + 'px';
  };
  Drag.prototype.mouseup =function(e){
    document.onmousedown = null;
    document.onmousemove =null;
    document.onmouseup = null;
    return false;
  }
  test();

　　html代码：

  <div id="box2">这是拖拽对象2</div>

　　

转载于:https://www.cnblogs.com/xiaoxiao666/p/6552694.html