Suppose I have a large view with scroll in both x and y direction and instead of scrolling with mouse scroll, I need to drag and move to navigate through the entire view like in google maps
<div id="wrapper">
<div id="dragable_content">
<img src="https://geology.com/world/world-map.gif" style="height:100rem;"/>
</div>
</div>how do I achieve this? preferably using only pure js
Thanks to the solution provided by @grisuu in the comments
I was able to whip up this:
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>