面向对象拖拽练习题

Posted Miqinda

tags:

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

首先来了解一下,面向对象练习的基本规则和问题:

 

先写出普通的写法,然后改成面向对象写法项

 

  1. 普通方法变形 
    ·尽量不要出现函数嵌套函数 
    ·可以有全局变量 
    ·把onload函数中不是赋值的语句放到单独函数中
  2. 改成面向对象 
    ·全局变量就是属性 
    ·函数就是方法 
    ·onload中创建对象 
    ·改this指针问题

先把拖拽效果的布局完善好:

html 结构:

<div id="box"></div>

csc 样式:

#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步,首先把面向过程的拖拽回顾一下

window.onload = function (){
  // 获取元素和初始值
  var oBox = document.getElementById(‘box‘),
    disX = 0, disY = 0;
  // 容器鼠标按下事件
  oBox.onmousedown = function (e){
    var e = e || window.event;
    disX = e.clientX - this.offsetLeft;
    disY = e.clientY - this.offsetTop;
    document.onmousemove = function (e){
      var e = e || window.event;
      oBox.style.left = (e.clientX - disX) + ‘px‘;
      oBox.style.top = (e.clientY - disY) + ‘px‘;
    };
    document.onmouseup = function (){
      document.onmousemove = null;
      document.onmouseup = null;
    };
    return false;
  };
};

第二步,把面向过程改写为面向对象

window.onload = function (){
  var drag = new Drag(‘box‘);
  drag.init();
};
// 构造函数Drag
function Drag(id){
  this.obj = document.getElementById(id);
  this.disX = 0;
  this.disY = 0;
}
Drag.prototype.init = function (){
  // this指针
  var me = this;
  this.obj.onmousedown = function (e){
    var e = e || event;
    me.mouseDown(e);
    // 阻止默认事件
    return false;
  };
};
Drag.prototype.mouseDown = function (e){
  // this指针
  var me = this;
  this.disX = e.clientX - this.obj.offsetLeft;
  this.disY = e.clientY - this.obj.offsetTop;
  document.onmousemove = function (e){
    var e = e || window.event;
    me.mouseMove(e);
  };  
  document.onmouseup = function (){
    me.mouseUp();
  }
};
Drag.prototype.mouseMove = function (e){
  this.obj.style.left = (e.clientX - this.disX) + ‘px‘;
  this.obj.style.top = (e.clientY - this.disY) + ‘px‘;
};
Drag.prototype.mouseUp = function (){
  document.onmousemove = null;
  document.onmouseup = null;
};

第三步,看看代码有哪些不一样

首页使用了构造函数来创建一个对象:

// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

遵守前面的写好的规则,把全局变量都变成属性!

然后就是把函数都写在原型上面:

Drag.prototype.init = function (){
};

Drag.prototype.mouseDown = function (){
};

Drag.prototype.mouseMove = function (){
};

Drag.prototype.mouseUp = function (){
};

先来看看 init 函数:

Drag.prototype.init = function (){
  // this指针
  var me = this;
  this.obj.onmousedown = function (e){
    var e = e || event;
    me.mouseDown(e);
    // 阻止默认事件
    return false;
  };
};

我们使用me变量来保存了 this 指针,为了后面的代码不出现 this 指向的错误

接着是 mouseDown 函数:

Drag.prototype.mouseDown = function (e){
  // this指针
  var me = this;
  this.disX = e.clientX - this.obj.offsetLeft;
  this.disY = e.clientY - this.obj.offsetTop;
  document.onmousemove = function (e){
    var e = e || window.event;
    me.mouseMove(e);
  };  
  document.onmouseup = function (){
    me.mouseUp();
  }
};

改写成面向对象的时候要注意一下 event对象 。因为 event对象 只出现在事件中,所以我们要把 event对象 保存变量,然后通过参数传递!

后面的 mouseMove 函数和 mouseUp 函数就没什么要注意的地方了!

以上是关于面向对象拖拽练习题的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

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

VSCode自定义代码片段9——JS中的面向对象编程

Js使用面向对象和面向过程的方法实现拖拽物体的效果

原生js拖拽(面向对象)

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