Js achieves drag effect, js implements drag
First, let's take a look at the basic rules and problems of object-oriented exercises:
First, write a common writing method, and then change it to an object-oriented writing item.
Normal method Deformation
· Avoid nested Functions
· Global variables
· Put the statement that is not a value assignment in the onload function into a separate function
Change to object-oriented
· Global variables are attributes.
· Functions are methods.
· Create an object in onload
· Change this pointer
First, complete the layout of the drag and drop effect:
HTML structure:
<Div id = "box"> </div>
Csc style:
# Box {position: absolute; width: 200px; height: 200px; background: red ;}
Step 1: first, review the process-oriented drag and drop
Copy codeThe Code is as follows:
Window. onload = function (){
// Obtain the element and Initial Value
Var oBox = document. getElementById ('box '),
DisX = 0, disY = 0;
// Container mouse pressing 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;
};
};
Step 2: rewrite the process orientation to object-oriented
Copy codeThe Code is as follows:
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 events
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;
};
Step 3: Check the code differences
The homepage uses constructors to create an object:
Copy codeThe Code is as follows:
// Constructor Drag
Function Drag (id ){
This. obj = document. getElementById (id );
This. disX = 0;
This. disY = 0;
}
Follow the preceding rules to convert global variables into attributes!
Then, write the functions on the prototype:
Copy codeThe Code is as follows:
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:
Copy codeThe Code is as follows:
Drag. prototype. init = function (){
// This pointer
Var me = this;
This. obj. onmousedown = function (e ){
Var e = e | event;
Me. mouseDown (e );
// Block default events
Return false;
};
};
We use the me variable to save the this pointer, so that the following code does not show the error that this points
The following is the mouseDown function:
Copy codeThe Code is as follows:
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 ();
}
};
Note the event object when rewriting to object-oriented. Because the event object only appears in the event, we need to save the event object variable and pass it through the parameter!
The following mouseMove function and mouseUp function have nothing to pay attention!
Notes
This pointer is especially important in object-oriented systems!
This extended reading:
Http://div.io/topic/809
Concerning the event object, the event object only appears in the event, so pay attention to it when writing the method!