js to achieve drag and drop effect_javascript skills

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

Copy code The code is as follows:

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

Copy code 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 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:

Copy code The code is as follows:

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

Copy code 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 first:

Copy code 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 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:

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

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!