您的位置：首页 > Web前端 > JavaScript

分别用普通过程，面向对象过程，和继承方法实现拖拽效果

2014-08-22 02:13 696 查看
首先我们在这里先写一个正常逻辑下，一个面向过程的js拖拽demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{width: 200px;height:200px;background:red;position: absolute;}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
oDiv.onmousedown=function(e){
var ev=e||event;
var posX=ev.clientX-oDiv.offsetLeft;
var posY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-posX+'px';
oDiv.style.top=oEvent.clientY-posY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
};
}

</script>
</body>
</html>


接下来我们如何去转为面向对象编码模式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{width: 200px;height:200px;background:red;position: absolute;}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
window.onload=function(){
new Drag('div1');
}

function Drag(id){
this.posX=0;
this.posY=0;
var _this=this;
this.oDiv=document.getElementById(id);
this.oDiv.onmousedown=function(ev){
_this.fnDw(ev);
}
}
Drag.prototype.fnDw=function(ev){
var _this=this;
var oEvent=ev||event;

this.posX=oEvent.clientX-this.oDiv.offsetLeft;
this.posY=oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove=function(ev){
_this.fnMove(ev);}
document.onmouseup=function(){
_this.fnUp();
}

}
Drag.prototype.fnMove=function(ev){
var oEvent=ev||event;

this.oDiv.style.left=oEvent.clientX-this.posX+'px';
this.oDiv.style.top=oEvent.clientY-this.posY+'px';
}
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
}

</script>
</body>
</html>


在这里其实很简单，只要将变量抽象出来作为属性，放在构造函数里面，在将原本的函数作为原型方法就可以了

跟着我们再来看看，继承的拖拽吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
#div1{width: 200px;height:200px;background:red;position: absolute;}
#div2{width: 200px;height:200px;background:blue;position: absolute;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
window.onload=function(){
new Drag('div1');
new LimitDrag('div2');
}

function Drag(id){
this.posX=0;
this.posY=0;
var _this=this;
this.oDiv=document.getElementById(id);
this.oDiv.onmousedown=function(ev){
_this.fnDw(ev);
}
}
Drag.prototype.fnDw=function(ev){
var _this=this;
var oEvent=ev||event;

this.posX=oEvent.clientX-this.oDiv.offsetLeft;
this.posY=oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove=function(ev){
_this.fnMove(ev);}
document.onmouseup=function(){
_this.fnUp();
}

}
Drag.prototype.fnMove=function(ev){
var oEvent=ev||event;

this.oDiv.style.left=oEvent.clientX-this.posX+'px';
this.oDiv.style.top=oEvent.clientY-this.posY+'px';
}
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
}

//继承

function LimitDrag(id){
Drag.call(this,id);
}

for(var i in Drag.prototype){
LimitDrag.prototype[i]=Drag.prototype[i];
}
LimitDrag.prototype.fnMove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-this.posX;
var t=oEvent.clientY-this.posY;

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";
}

</script>
</body>
</html>


在这里，我们通过继承的方式实现了LimitDrag对象，仅仅简单的对其做了左右的限制，还为完善····
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  面向对象 继承 javascript拖拽
相关文章推荐
新的分享
章节导航