I want to know the coordinates where the element was dragged and dropped

Error message

Cannot get coordinates by dragging and dropping elements

Applicable source code

drag 
 and 
 drop 


<script>
document.getElementById ("target") .onclick = function (event) {
var x = event.pageX;// Horizontal position coordinates
var y = event.pageY;// vertical position coordinate
alert (x + ":" + y);// Display alert for confirmation
}
</script>

javascript

window.onload = function () {

// Get element
var elements = document.getElementsByClassName ("drag-and-drop");

// A global (like) variable that gets the clicked position within the element
var x;
var y;

// Fired when the mouse is pressed or touched within an element
for (var i = 0;i elements [i] .addEventListener ("mousedown", mdown, false);
elements [i] .addEventListener ("touchstart", mdown, false);
}

// Function when mouse is pressed
function mdown (e) {

// Add .drag to class name
this.classList.add ("drag");

// Absorb the difference between touch events and mouse events
if (e.type === "mousedown") {
var event = e;
} else {
var event = e.changedTouches [0];
}

// Get the relative coordinates within the element
x = event.pageX-this.offsetLeft;
y = event.pageY-this.offsetTop;

// Call back to move event
document.body.addEventListener ("mousemove", mmove, false);
document.body.addEventListener ("touchmove", mmove, false);
}

// Fired when the mouse cursor moves
function mmove (e) {

// Get dragged element
var drag = document.getElementsByClassName ("drag") [0];

// Similar mouse and touch differences
if (e.type === "mousemove") {
var event = e;
} else {
var event = e.changedTouches [0];
}

// Suppress default behavior to prevent screen movement when flicked
e.preventDefault ();

// Move the element to where the mouse moved
drag.style.top = event.pageY-y + "px";
drag.style.left = event.pageX-x + "px";

// Fires when the mouse button is released or the cursor is removed
drag.addEventListener ("mouseup", mup, false);
document.body.addEventListener ("mouseleave", mup, false);
drag.addEventListener ("touchend", mup, false);
document.body.addEventListener ("touchleave", mup, false);

}

// Fire when mouse button is raised
function mup (e) {
var drag = document.getElementsByClassName ("drag") [0];

// Clear move vent handler
document.body.removeEventListener ("mousemove", mmove, false);
drag.removeEventListener ("mouseup", mup, false);
document.body.removeEventListener ("touchmove", mmove, false);
drag.removeEventListener ("touchend", mup, false);

// Eliminate class name .drag
drag.classList.remove ("drag");
}

}
`` `

I tried z-index but didn't understand

Supplemental information (FW/tool version etc.)

Please provide more detailed information here.