用面向对象写一个拖拽,并实现继承

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用面向对象写一个拖拽,并实现继承相关的知识,希望对你有一定的参考价值。

思路:先用面过过程的方法将要实现的效果实现出来,然后按照以下步骤将拆分成面向对象  

  //面向过程的程序改写成面向对象程序不能有函数嵌套
  //将window.onload初始化整个程序改为构造函数初始化整个对象
  //将面向过程中的变量改为属性
  //将面向过程中的函数改为方法

index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>面向对象拖拽</title>
  <style>
    #div1{width: 200px;height: 200px;background: red;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>

 

Drag.js文件

function Drag(id){
  this.disX = 0;
  this.disY = 0;
  var _this = this;
  this.oDiv = document.getElementById(id);
  this.oDiv.onmousedown = function(e){
    _this.fnDown(e);
    return false;
  };
}

Drag.prototype.fnDown = function(e){
  var _this = this;
  var e = e || window.event;
  this.disX = e.clientX-this.oDiv.offsetLeft;
  this.disY = e.clientY-this.oDiv.offsetTop;
  document.onmousemove = function(e){
    _this.fnMove(e);
  };
  document.onmouseup = function(){
    _this.fnUp();
  };
}

Drag.prototype.fnMove = function(e){
  var e = e || window.event;
  this.oDiv.style.left = e.clientX-this.disX + ‘px‘;
  this.oDiv.style.top = e.clientY-this.disY + ‘px‘;
}

Drag.prototype.fnUp = function(e){
  document.onmousemove = null;
  document.onmouseup = null;
}

 

limitDrag.js文件,用来实现拖拽继承

function limitDrag(id){
  Drag.call(this,id)
}
for(var i in Drag.prototype){
  limitDrag.prototype[i] = Drag.prototype[i];
}

//新继承出来的拖拽可以实现自己的单独的功能
limitDrag.prototype.fnMove = function(e){
  var e = e || window.event;
  var l = e.clientX-this.disX;
  var t = e.clientY-this.disY;
  if(l<0){
    l=0;
  }else if(l>document.documentElement.clientWidth - this.oDiv.offsetWidth){
    l=document.documentElement.clientWidth - this.oDiv.offsetWidth
  }
  this.oDiv.style.left = l + ‘px‘;
  this.oDiv.style.top = t + ‘px‘;
}

以上是关于用面向对象写一个拖拽,并实现继承的主要内容,如果未能解决你的问题,请参考以下文章

js - 面向对象 - 小案例:轮播图随机点名选项卡鼠标拖拽

面向对象写选项卡拖拽

面向对象语言成员变量方法可见性在继承中的变化

Day7 初识面向对象,面向对象之继承与派生

面向对象实战之封装拖拽对象

对于面向对象的基本理解