<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag and Drop Example with Coordinates</title> <style> #dragElement { width: 100px; height: 100px; background-color: blue; cursor: move; } </style> </head> <body> <div id="dragElement" draggable="true"></div> <script> const dragElement = document.getElementById("dragElement"); dragElement.ondragend = function(event) { let x = event.clientX; let y = event.clientY; console.log("Dropped at coordinates: ", x, y); event.target.style.position = "absolute"; event.target.style.left = x + "px"; event.target.style.top = y + "px"; }; </script> </body> </html>