I am making page like google maps with html, css, javascript so I want to make page draggable.
let newX = 0, newY = 0, startX = 0, startY = 0;
const map = document.getElementsByClassName('world-map')[0]
map.addEventListener('mousedown', mouseDown)
function mouseDown(e) {
startX = e.clientX
startY = e.clientY
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
}
function mouseMove(e){
newX = startX - e.clientX
newY = startY - e.clientY
startX = e.clientX
startY = e.clientY
map.style.left = startX + 'px'
map.style.top = startY + 'px'
}
function mouseUp(e) {
document.removeEventListener('mousemove', mouseMove)
}
I tried this but it moves back to start point(0,0) after mouseup and then
let newX = 0, newY = 0, startX = 0, startY = 0;
const map = document.getElementsByClassName('world-map')[0]
map.addEventListener('mousedown', mouseDown)
function mouseDown(e) {
startX = e.clientX
startY = e.clientY
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
}
function mouseMove(e){
newX = startX - e.clientX
newY = startY - e.clientY
startX = e.clientX
startY = e.clientY
map.style.top = (map.offsetTop - startY) + 'px'
map.style.left = (map.offsetLeft - startX) + 'px'
}
function mouseUp(e) {
document.removeEventListener('mousemove', mouseMove)
}
tried this but it doesn’t even move.
Element world-map’s css is ‘position:absolute’
I think I need to update a new x,y in variables after moving so tried several ways but it doesn’t worked.
Is there any possible way to make it?
Sorry for my bad english.