Home>

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.

  • Answer # 1

      

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

    Event listener for mouse operation
    mousedownis present butmouseupeventis missing. I'm sorry. That's wrong.
    Correction) How about trying to get the mouse position during mouseup?

    Check the movement of the mouse button for drag and drop.

    Drag ... Mouse button down (mousedown)/Touch (number of fingers: 0->1)

    Drop ... mouse button release (mouseup)/touch (number of fingers: 1->0)