I want to know the coordinates where the element was dragged and dropped
Error messageCannot 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 ("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
Related articles
- i want to get the coordinates of the javascript div area 2
- i want to get the coordinates of the javascript div area
- javascript - i want to reduce if and else in the code and make it cleaner
- javascript - i want to get rid of api errors with gas
- javascript - get the result from console
- javascript - i want to get slickgrid data from another page
- about javascript `` and ""
- javascript - i want to get the root path of the current url
- javascript - how to get any element with documentqueryselector
- javascript json i want to loop and pass values
- javascript - i don't know how to get rakuten api json data
- javascript - i get an error with split
- javascript - i want to get the liff url of line
- javascript - i want to get the coordinates after the movement of the node drawn with visjs
- wordpress - file drag and drop tag is not output in contactform7
- ruby - how to put and get the hash value in checkbox
- javascript - i want to get the value entered in the text box
- javascript and php variables
- c# - get and response
- c # - about drag and drop in ugui of unity
- javascript : How to refer from the JS file (which is linked to the first html file) to the second HTML file?
- javascript : Move text by button
- javascript : Is the code adequate for the js test assignment?)
- javascript : Prop doesn't work on checkbox
- javascript : How to write the correct regex to wrap each character in a span except br and remove all spaces
- javascript : Open iframe link in new tab
- javascript : Handling a click on a menu item
- javascript : Stylized text selection
- javascript : How do I animate text that is smoothly falling from top to bottom?
- javascript : Why, when printing, the canvas is cleared and nothing else appears on it?
Event listener for mouse operation
mousedown
is present butmouseup
eventis 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)