Supongamos que tengo una vista grande con desplazamiento en ambas direcciones x e y y en lugar de desplazarme con el desplazamiento del mouse, necesito arrastrar y mover para navegar por toda la vista como en Google Maps
<div id="wrapper"> <div id="dragable_content"> <img src="https://geology.com/world/world-map.gif" style="height:100rem;"/> </div> </div>¿Cómo logro esto? preferiblemente usando solo js puro
Gracias a la solución brindada por @grisuu en los comentarios
Pude preparar esto:
var _startX = 0; var _startY = 0; var _offsetX = 0; var _offsetY = 0; var _dragElement; document.onmousedown = OnMouseDown; document.onmouseup = OnMouseUp; function OnMouseDown(event){ document.onmousemove = OnMouseMove; _startX = event.clientX; _startY = event.clientY; _offsetX = document.getElementById('div1').offsetLeft; _offsetY = document.getElementById('div1').offsetTop; _dragElement = document.getElementById('div1'); } function OnMouseMove(event){ _dragElement.style.left = (_offsetX + event.clientX - _startX) + 'px'; _dragElement.style.top = (_offsetY + event.clientY - _startY) + 'px'; } function OnMouseUp(event){ document.onmousemove = null; _dragElement=null; } html{ background-color:green; overflow: hidden; } .div1{position:absolute; height:500px; width: 500px; z-index:1;} <div class="div1" id="div1"> <div style="height:50px;width:50px;background-color:red;"></div> <div style="position:absolute;top:75px;left:100px;height:50px;width:50px;background-color:blue;"></div> </div>