Drag an object with the mouse

Yesterday, on a big fairy blog, I saw him at Bs's poor front-end, and BS's "people who don't have the ability to use native js to write drag-and-drop effects ". For fear of BS, here is a lower case drag-and-drop effect to practice... Post it hereCode:

JS/move. JS File

 //  Encapsulate an absolutely positioned object as a drag object  
  Function Movecontrol (c ){
 /*  Considering browser compatibility, write a public method to get the event object.  */ 
C. getevent = Function (E ){
 If (! E ){
E = event;
E. pagex = event. X;
E. Pagey = event. Y;
}
 Return E;
}
 /*  When the mouse is pressed on the object, record the mouse position when it is pressed, and modify the listening lock to start listening.  */ 
C. onmousedown = Function (E ){
E = This . Getevent (E );
 This . IX = E. pagex;
 This . Iy = E. Pagey;
 This . Movekey =True ;
}
 /*  When you move the mouse over an object, the object is also moved.  */ 
C. onmousemove = Function (E ){
 If (! This . Movekey) Return ;

E = This . Getevent (E );
 This . Style. Top = parseint ( This . Style. Top? This . Style. Top: 0) + (E. Pagey- This . Iy) + "PX ";
 This . Style. Left = parseint ( This . Style. Left? This . Style. Left: 0) + (E. pagex- This . IX) + "PX ";
 This . IX = E. pagex;
 This . Iy = E. Pagey;
}
 /*  When you move the mouse over an object, stop moving the object. */ 
C. onmouseup = Function (E ){
 This . Movekey = False ;
}
}

HTML file child.html

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  > 
 <  Html  Xmlns = "Http://www.w3.org/1999/xhtml"  > 
 <  Head  > 
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"  /> 
 <  Title  > Untitled document</  Title  > 
 <  Script  SRC  = "JS/move. js"  > </  Script  > 
 <  Script  Type  = "Text/JavaScript"  >  
Window. onload =  Function  (){
  VaR  D  =  Document. getelementbyid (  "  D  "  );
Movecontrol (d );
}
  </ Script  > 
 </  Head  > 
 <  Body  > 

 <  Div  ID  = "D"  Style  = "Width: 100px; Height: 100px; Background: #555; position: fixed ;"  > </ Div  > 

 </  Body  > 
 </  Html  > 

Over...

Very simple. Let's look at the effect below:

IE8:

 

Chrome: