通过-拖拽-认识对象继承与对象冒充
2017-10-12 本文已影响0人
风之伤_3eed
在昨天通过“拖拽”了解了this在不同情况下的指向，今天在此基础上我们来对对象的继承与对象的冒充来进行了解。
在昨天“拖拽”代码的基础上，用对象的继承来对代码进行修改。
还是先创建一个构造函数（Box(boxId)）,不同的是我们不在构造函数中直接给出运动和停止的行为。而是将他的行为加在他的原型中，这样可以节省空间。
function Box(boxId){
if (boxId == undefined) {
return;
}
this.ele=document.getElementById(boxId);
var self=this;
this.ele.onmousedown=function(e){
e.preventDefault();
self.detaX = e.clientX - this.offsetLeft;
self.detaY = e.clientY - this.offsetTop;
self.move();
document.onmouseup=function(){
self.stop();
}
}
}
随鼠标移动的行为加在该物体中（Box.prototype.move为在Box的原型中加入move属性）。
Box.prototype.move=function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "PX"
self.ele.style.top = (e.clientY - self.detaY) + "PX"
}
}
停止移动的行为加在该物体中（Box.prototype.stop为在Box的原型中加入stop属性）。
(Box.call(this,boxId))是继承Box的属性,this后的参数为函数的形参。（其实还可以用(Box.apply(this,[boxId])来代替，唯一不同的是在用apply时this后的参数必须为数组，数组里的每一项为函数的形参）。
Box.prototype.stop=function(){
document.onmousemove=null;
}
function Box2(boxId){
Box.call(this,boxId);
}
这样我们就建立了一个可以拖拽的物体box1。
var box1=new Box("box1");
通过对象的继承让Box2继承了Box的属性与行为。（Box.call(this,boxId);）让Box2继承了Box的属性，（Box2.prototype=new Box()）让Box2继承了Box的行为/方法。
function Box2(boxId){
Box.call(this,boxId);
}
Box2.prototype=new Box();
修改了Box2原型中的move属性（其实只是增加了一个显示当前坐标的功能）
Box2.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "px";
self.ele.style.top = (e.clientY - self.detaY) + "px";
self.ele.innerHTML=(e.clientX - self.detaX)+","+(e.clientY - self.detaY)
}
}
这样我们就建立了一个可以拖拽的物体box2，并且可以显示当前坐标。
var box2=new Box2("box2");
通过对象的继承让Box3继承了Box的属性与行为。（Box.call(this,boxId);）让Box3继承了Box的属性，（Box3.prototype=new Box()）让Box3继承了Box的行为/方法。
function Box3(boxId){
Box.call(this,boxId)
}
Box3.prototype = new Box();
修改了Box3原型中的move属性（看着很多的判断语句其实只是让其在宽为1100px高为600px的空间中拖拽）。
Box3.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
if((e.clientX - self.detaX)>=0&&(e.clientX - self.detaX)<=1000){
self.ele.style.left = (e.clientX - self.detaX) + "px";
}else if((e.clientX - self.detaX)<0){
self.ele.style.left = 0 + "px";
}else{
self.ele.style.left = 1000 + "px";
}
if((e.clientY - self.detaY)>=0&&(e.clientY - self.detaY)<=500){
self.ele.style.top = (e.clientY - self.detaY) + "px";
}else if((e.clientY - self.detaY)<0){
self.ele.style.top = 0 + "px";
}else{
self.ele.style.top = 500 + "px";
}
}
}
这样我们就建立了一个可以拖拽的物体box3，并且只能在宽为1100px高为600px的空间中拖拽。
var box3=new Box3("box3");
附上完整代码！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background:red;
position:absolute;
}
#box1{
background:green;
}
#box2{
background:yellow;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<script>
function Box(boxId){
if (boxId == undefined) {
return;
}
this.ele=document.getElementById(boxId);
var self=this;
this.ele.onmousedown=function(e){
e.preventDefault();
self.detaX = e.clientX - this.offsetLeft;
self.detaY = e.clientY - this.offsetTop;
self.move();
document.onmouseup=function(){
self.stop();
}
}
}
Box.prototype.move=function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "PX"
self.ele.style.top = (e.clientY - self.detaY) + "PX"
}
}
Box.prototype.stop=function(){
document.onmousemove=null;
}
function Box2(boxId){
Box.call(this,boxId);
}
Box2.prototype=new Box();
Box2.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "px";
self.ele.style.top = (e.clientY - self.detaY) + "px";
self.ele.innerHTML=(e.clientX - self.detaX)+","+(e.clientY - self.detaY)
}
}
function Box3(boxId){
Box.call(this,boxId)
}
Box3.prototype = new Box();
Box3.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
if((e.clientX - self.detaX)>=0&&(e.clientX - self.detaX)<=1000){
self.ele.style.left = (e.clientX - self.detaX) + "px";
}else if((e.clientX - self.detaX)<0){
self.ele.style.left = 0 + "px";
}else{
self.ele.style.left = 1000 + "px";
}
if((e.clientY - self.detaY)>=0&&(e.clientY - self.detaY)<=500){
self.ele.style.top = (e.clientY - self.detaY) + "px";
}else if((e.clientY - self.detaY)<0){
self.ele.style.top = 0 + "px";
}else{
self.ele.style.top = 500 + "px";
}
}
}
var box1=new Box("box1");
var box2=new Box2("box2");
var box3=new Box3("box3");
</script>
</body>
</html>
