js实现拖拽效果

前端之家收集整理的这篇文章主要介绍了js实现拖拽效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数

改成面向对象

·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题

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

Box">

csc样式: #Box{position: absolute;width: 200px;height: 200px;background: red;}

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

代码如下:
获取元素和初始值 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; }; };

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

代码如下:
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; }

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

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

代码如下:

先来看看init函数

代码如下:

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

接着是mouseDown函数:

代码如下:

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

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

要注意的问题

关于this指针的问题,面向对象里面this特别重要! this拓展阅读:

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

猜你在找的JavaScript相关文章