Js and drag the window coordinates

First, the coordinates of the properties of the event object
1, the event object .offsetX object events .offsetY
clicks to get the coordinates of the upper left corner of the label
2, the event object .clientX event object .clientY
when clicked, the coordinates of the upper left corner window
3, the event object. pageX event object .pageY
when clicked, the page upper left corner coordinates

If there is no scrolling, top left and top left corner of the window overlap, the two values ​​are different

var oDiv document.querySelector = ( 'div' );
oDiv.onclick = function (E) {
     // Get target content left corner 
    var X = e.offsetX;
     var Y = e.offsetY;
    console.log(x,y);
    // Get the window coordinates to create 
    var the CX = e.clientX;
     var CY = e.clientY;
    console.log(CX,CY);
    Html files get coordinates of the upper left corner
    var PX = e.pageX;
    var PX = e.pageY;
    console.log(PX,PY);
    console.log(e);
}

example:

To a high of 100px wide div to do with the click position, click on the center point of reaching the position

var attire document.querySelector = ( 'div' )
 //
 var oDivHeight = oDiv.offsetHeight;
var oDivWidth = oDiv.offsetWidth;
window.onclick = function (E) {
     // for positioning reassigned so that the top and left positioning value is changed, so as to achieve a position change div 
    // on the basis of the original value, and then subtracting the positioning tab width and height half
    oDiv.style.left = e.clientX - oDiv.offsetWidth / 2 + 'px';
    oDiv.style.top = e.clientY -oDiv.offsetHeight / 2 + 'px';
}

Second, the drag effect is achieved by using the window coordinates Example:

// drag effect 
// when the mouse is pressed, and the displacement movement when the mouse event occurs 
// Get the div tag 
var oDiv = document.querySelector ( 'div' );
 // before moving div, the original positioning data previously recorded 
var oldTop = window.getComputedStyle (oDiv) .top;
 var oldLeft = window.getComputedStyle (oDiv) .left;

// When the mouse down, mouse move, add event 
window.onmousedown = function () {
     // the console.log ( 'mouse down'); 
    window.onmousemove = function (E) {
         // the console.log ( ' mouse sliding '); 
        // the coordinates of the mouse, positioning the div as values, positioning the position of the center
        oDiv.style.left = e.clientX - oDiv.offsetWidth / 2 + 'px';
        oDiv.style.top = e.clientY - oDiv.offsetHeight / 2 + 'px';
    }
}
// when the mouse is lifted, mouse movement, assignment null, no event is executed, if you remove this function, as long as the mouse over html, and also on the html page, div moves accordingly even without clicking div, will follow mobile 
window.onmouseup = function () {
 // whenever the mouse is a lift, lost motion effects 
    window.onmousemove = null ;
     // can give div defined, position location, may return to the original position 
    // also function outside the recording original storage location 
    = oDiv.style.left oldLeft;
    oDiv.style.top = oldTop;
}        

Example Concluding Thoughts:
1, must first press event after event --- first move and then beheaded corpse shift
2, lift the mouse, move to define the event is null
can also add other operations, for example, so that the label back to the original bits
back to the original position, it is necessary at the start of the program, the original recording location coordinates to
3, the basic idea
(1), from the definition of the function, acquiring a width of the browser window, the height
not with a scroll bar
(2) obtaining coordinates of the mouse, according to the project requirements, the performance values calculated location
coordinates of the mouse, according to the actual needs, and is currently in use relative positioning of the upper left corner of the visible window
diverse application requirements, + / - different values
(3), is set extremum
a minimum value of 00
maximum value of the visible window width / height - label the X-axis / Y-axis final placeholder
(4), the final data, as a label positioning coordinates
must splicing unit px