js实现拖拽效果
js实现拖拽效果
发布时间:2016-12-30 来源:查字典编辑
摘要:首先来了解一下,面向对象练习的基本规则和问题:先写出普通的写法,然后改成面向对象写法项普通方法变形·尽量不要出现函数嵌套函数·可以有全局变量...

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

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

普通方法变形

·尽量不要出现函数嵌套函数

·可以有全局变量

·把onload函数中不是赋值的语句放到单独函数中

改成面向对象

·全局变量就是属性

·函数就是方法

·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函数就没什么要注意的地方了!

要注意的问题

关于this指针的问题,面向对象里面this特别重要!

this拓展阅读:

http://div.io/topic/809

关于event对象的问题,event对象只出现在事件里面,所以写方法的时候要注意一下!

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类