console
let startX
let startY
let mouseOffsetX
let mouseOffsetY
title.ondragstart = function (e) {
const { left, top } = e.target.getBoundingClientRect()
startX = left
startY = top
mouseStartX = e.pageX
mouseStartY = e.pageY
console.log(startX, startY)
}
title.ondragend = function (e) {
const offsetX = e.pageX - mouseStartX
const offsetY = e.pageY - mouseStartY
const el = e.target
el.style.left = `${startX + offsetX}px`
el.style.top = `${startY + offsetY}px`
console.log("drag end", offsetX, offsetY)
}
<body draggable="true">
<h1 id="title" draggable="true">Hi friend, try edit me!</h1>
</body>
body {
padding: 0;
margin: 0;
height: 100vh;
background: #eee;
}
h1 {
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 0;
cursor: pointer;
background: orange;
}