Js implementation drag effect

Js implementation drag effect

This article aims to give you a better understanding of js object-oriented information and demonstrate JavaScript object-oriented information through drag-and-drop operations.

 

 

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

 

The 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

 

The 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:

 

The 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:

 

The 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:

 

The 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:

 

The 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!