面向对象是大部分编程语言的一大重头戏，大型项目都离不开它，今天简单地分享一下用面向对象实现多重效果的拖拽，里面将涉及原型，继承等知识点。
思路
我们需要在页面上建3个不同颜色的div，一个实现普通拖拽效果，一个实现拖动时里面显示当前坐标，一个实现拖拽不能超出页面。由于3个拖拽效果都需要实现普通拖拽效果，所以可以将普通拖拽设置为其他两种的原型。
下面是页面排版代码：
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
//构造3个div
html , body{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
position: absolute;
}
#box1{
background: #ff0000;
z-index: 2;
}
#box2{
background: #0000ff;
z-index: 3;
}
#box3{
background: #00ff00;
}
//设置不同样式，红蓝绿。
关于js代码，首先我们可以对普通拖拽创建一个函数,这部分代码会有点长，不过后面两种拖拽效果可以调动这个函数，非常方便。
function PuBox(BoxId){
if (BoxId == undefined) {
return;
}
this.ele=document.getElementById(BoxId);
//获取div的id，没有输入的话就结束动画。
//将拖拽效果分成两部分，开始和结束。因为拖拽行为是共同的，所以可以把这两部分写在普通拖拽的原型里面。
var self=this;
this.ele.onmousedown=function(e){
e.preventDefault();
self.detaX=e.clientX-self.ele.offsetLeft;
self.detaY=e.clientY-self.ele.offsetTop;//获取鼠标位置和div坐标差值。
self.start();//开始实行拖动。
document.onmouseup=function(){
self.end() ; //鼠标抬起结束拖拽。
}
}
}
//下面将开始和结束写在普通拖拽的原型里面。
PuBox.prototype.start=function(){
var self=this;
document.onmousemove=function(e1){
var x=e1.clientX-self.detaX;
var y=e1.clientY-self.detaY;//获取鼠标当前坐标。
self.move(x,y);//执行移动，下面会写这个函数。
}
}
PuBox.prototype.move=function(x,y){
this.ele.style.left=x+"px";
this.ele.style.top=y+"px";//移动div，实现拖拽。
}
PuBox.prototype.end=function(){
document.onmousemove=null;//结束拖拽。
}
new PuBox("box1");//将box1实现普通拖拽。
下面介绍第二种拖拽，div里面显示当前位置。这部分比较简单。
function TextBox(BoxId){
PuBox.call(this,BoxId);//首先调用普通拖拽的属性（参数）；
}
TextBox.prototype=new PuBox();//再调用普通拖拽的函数将其作为新拖拽的原型。
//由于新拖拽效果与普通拖拽的效果就在移动时有点不同，添加了坐标显示效果，所以只需改动move函数一下就行。
TextBox.prototype.move=function(x,y){
PuBox.prototype.move.call(this,x,y);//首先调用普通拖拽的移动函数
this.ele.innerHTML=x+"px,"+y+"px";//然后添加坐标显示，这样这个新的拖拽就实现了。
}
new TextBox("box2");//将box2实现第二种拖拽效果。
至于第三种拖拽，跟第二种差不多，只要在原型中move函数加上位置判断然后改成不能移出页面就行。
function ConBox(BoxId){
PuBox.call(this,BoxId);
}//同样调用普通拖拽的属性（参数）；
ConBox.prototype=new PuBox();//调用普通拖拽作为原型。
//我这里直接将move函数重新写了，没有在原来基础上改。
ConBox.prototype.move=function(x,y){
if(x<0){
x=0;
}else if(x>1260){
x=1260;
}
if(y<0){
y=0;
}else if(y>575){
y=575;
}
this.ele.style.left=x+"px";
this.ele.style.top=y+"px";//加上坐标大小判断，然后再赋值给div。
}
new ConBox("box3");//将box3实现不能拖出页面。
今天的分享主要是原型的应用和继承问题，如果你能很好地应用面向对象，那么你的代码会简洁很多，所以，一起努力，将面向对象融于心中。
网友评论