JS implementation of drag-and-drop effect _javascript skills

First, take a look at the basic rules and issues of object-oriented practice:

Write the common wording first, then change to the object-oriented writing
Normal method of deformation

• Try not to show function nesting functions
• Can have global variables
• Place a statement in the OnLoad function that is not an assignment in a separate function

Change to Object oriented

• Global variables are attributes
• Function is the method
Creating objects in onload
• Change this pointer problem

First, the layout of the drag-and-drop effect is perfect:
HTML structure:

<div id= "box" ></div>

CSC style:
#box {position:absolute;width:200px;height:200px;background:red;}

The first step is to first review the process-oriented drag-and-drop

Copy Code code as follows:

Window.onload = function () {
Get elements and initial values
var obox = document.getElementById (' box '),
DISX = 0, Disy = 0;
Container Mouse Down 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 the orientation process as Object oriented

Copy Code code 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 three, see what's different about the code.

The first page uses a constructor to create an object:

Copy Code code as follows:

Constructor drag
function Drag (ID) {
This.obj = document.getElementById (ID);
THIS.DISX = 0;
This.disy = 0;
}

Adhere to the previous written rules, the global variable into a property!

Then you write the function on the prototype:

Copy Code code 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 Code code 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, for the following code does not appear this point error

And then the MouseDown function:

Copy Code code 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 ();
}
};

Be aware of the event object when you rewrite it as an object-oriented object. Because the event object only appears in events, we save variables and pass them through arguments!

The MouseMove function and the MouseUp function have no place to pay attention to!

To pay attention to the problem

About this pointer problem, object-oriented inside this is particularly important!
This expands reading:
http://div.io/topic/809

About the event object, the Events object only appears in the incident, so write the method should pay attention to!