First, let’s understand the basic rules and issues of object-oriented exercises:
First write the normal writing method, and then change it to the object-oriented writing method
Ordinary method transformation
·Try not to have nested functions
·Can have global variables
·Put the non-assignment statements in the onload function into a separate function
Change to object-oriented
·Global variables are attributes
·Functions are methods
·Create objects in onload
·Change this pointer issue
First improve the layout of the drag effect:
HTML structure:
csc style:
#box{position: absolute;width: 200px;height: 200px;background: red;}
The first step is to review process-oriented drag and drop
window.onload = function (){
// Get the element and initial value
var oBox = document.getElementById('box'),
disX = 0, disY = 0;
//Container mouse press event
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;
};
};
The second step is to rewrite process-oriented into object-oriented
window.onload = function (){
var drag = new Drag('box');
Drag.init();
};
//Constructor Drag
function Drag(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}
Drag.prototype.init = function (){
// this pointer
var me = this;
This.obj.onmousedown = function (e){
var e = e || event;
me.mouseDown(e);
//Block default event
return false;
};
};
Drag.prototype.mouseDown = function (e){
// this pointer
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;
};
The third step is to see the differences in the code
The home page uses a constructor to create an object:
//Constructor Drag
function Drag(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}
Follow the previously written rules and turn all global variables into attributes!
Then just write the functions on the prototype:
Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};
Let’s take a look at the init function first:
Drag.prototype.init = function (){
// this pointer
var me = this;
This.obj.onmousedown = function (e){
var e = e || event;
me.mouseDown(e);
//Block default event
return false;
};
};
We use the me variable to save the this pointer, so that the error pointed to by this will not occur in the subsequent code
Then comes the mouseDown function:
Drag.prototype.mouseDown = function (e){
// this pointer
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();
}
};
When rewriting it into object-oriented, pay attention to the event object. Because the event object only appears in events, we need to save the event object in variables and then pass it through parameters!
There is nothing to pay attention to in the following mouseMove function and mouseUp function!
Things to note
Regarding the issue of this pointer, this is particularly important in object-oriented!
This extended reading:
http://div.io/topic/809
Regarding the issue of event objects, event objects only appear in events, so pay attention when writing methods!