Object-oriented drag and drop exercises

First, let's look at the basic rules and issues of object-oriented practice:

First write the normal writing, and then change the object-oriented wording

1. Common method variants
   • Do not show function nesting functions as much as possible
   • Can have global variables
   • Place a statement in the OnLoad function that is not an assignment in a separate function
2. Change to object-oriented
   • Global variables are attributes
   • Functions are methods
   Creating objects in onload
   • Change this pointer problem

First of all, the layout of the drag effect is perfect:

HTMLStructure:

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

cscStyle:

#box{position: absolute;width: 200px;height: 200px;background: red;}The first step is to review the process-oriented drag-and-drop

Window.onload =function(){  Get elements and initial values var OBox = document.getElementById (' Box '), DISX =0, Disy =0; Container Mouse down EventsObox.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 process as object-oriented

Window.onload =function(){  var drag =New Drag (' box ');Drag.init ();};Constructor dragfunctionDrag(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  ReturnFalse};};D Rag.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 (); }};D Rag.prototype.mouseMove = function (e) { this.obj.style.left = (E.clientx- this.disx) + ' px ';  this.obj.style.top = (E.clienty- this.disy) + ' px ';};D Rag.prototype.mouseUp = function () { document.onmousemove = null; document.onmouseup =  null;};                    

The third step is to see what the code is not like

The first page uses a constructor to create an object:

// 构造函数Dragfunction Drag(id){ this.obj = document.getElementById(id); this.disX = 0; this.disY = 0;}

Follow the previous well-written rules and turn global variables into properties!

And then just write the function on the prototype:

function (){};Drag.prototype.mouseDown = function (){};Drag.prototype.mouseMove = function (){};Drag.prototype.mouseUp = function (){};

First look at the init function:

  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 hold the this pointer, for the subsequent code does not appear to this point to the error

Then 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 ();    

Be careful when rewriting into object-oriented event对象 . Because it event对象 only appears in the event, we are going to event对象 save the variable and pass it through the parameters!

There's mouseMove mouseUp nothing to pay attention to in the back functions and functions!

Object-oriented drag and drop exercises