js实现拖拽效果
首先来了解一下,面向对象练习的基本规则和问题:
先写出普通的写法,然后改成面向对象写法项
普通方法变形
·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到单独函数中
改成面向对象
·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题
先把拖拽效果的布局完善好:
HTML结构:
<divid="box"></div>
csc样式:
#box{position:absolute;width:200px;height:200px;background:red;}
第一步,首先把面向过程的拖拽回顾一下
window.onload=function(){ //获取元素和初始值 varoBox=document.getElementById('box'), disX=0,disY=0; //容器鼠标按下事件 oBox.onmousedown=function(e){ vare=e||window.event; disX=e.clientX-this.offsetLeft; disY=e.clientY-this.offsetTop; document.onmousemove=function(e){ vare=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; }; returnfalse; }; };
第二步,把面向过程改写为面向对象
window.onload=function(){ vardrag=newDrag('box'); drag.init(); }; //构造函数Drag functionDrag(id){ this.obj=document.getElementById(id); this.disX=0; this.disY=0; } Drag.prototype.init=function(){ //this指针 varme=this; this.obj.onmousedown=function(e){ vare=e||event; me.mouseDown(e); //阻止默认事件 returnfalse; }; }; Drag.prototype.mouseDown=function(e){ //this指针 varme=this; this.disX=e.clientX-this.obj.offsetLeft; this.disY=e.clientY-this.obj.offsetTop; document.onmousemove=function(e){ vare=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 functionDrag(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指针 varme=this; this.obj.onmousedown=function(e){ vare=e||event; me.mouseDown(e); //阻止默认事件 returnfalse; }; };
我们使用me变量来保存了this指针,为了后面的代码不出现this指向的错误
接着是mouseDown函数:
Drag.prototype.mouseDown=function(e){ //this指针 varme=this; this.disX=e.clientX-this.obj.offsetLeft; this.disY=e.clientY-this.obj.offsetTop; document.onmousemove=function(e){ vare=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对象只出现在事件里面,所以写方法的时候要注意一下!