如何点击和拖动一个大的视图像在谷歌地图?

Question

假设我有一个大的视图，在x和y方向上都有滚动，而不是用鼠标滚动，我需要拖动和移动来导航整个视图，就像在谷歌地图

<div id="wrapper">
<div id="dragable_content">
<img src="https://geology.com/world/world-map.gif" style="height:100rem;"/>
</div>
</div>

我如何做到这一点?最好只使用纯js

Answer 1

感谢@grisuu在评论中提供的解决方案

我可以快速生成这个:

jsfiddle

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>

Answer 2

我通过编辑arsher的答案为我的个人项目实现了相同的功能，我想在这里分享我最终得到的代码。

以下是一些注释:

• 这段代码根本没有使用css，而是使用scrollTo。
• 我在图像上使用draggable='false'来防止浏览器拖动图像。
• document.documentElement.scrollTop / .scrollLeft可能有一些浏览器支持问题，有很多方法来获得文档滚动位置值，其中许多对我不起作用，这一个

/* check browser support, tested on Chrome v108
**********************************************************************/
let _startX = 0,
_startY = 0,
_scrollTop = 0,
_scrollLeft = 0;
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
function OnMouseDown(event) {
document.onmousemove = OnMouseMove;
_startX = event.clientX;
_startY = event.clientY;
_scrollTop = document.documentElement.scrollTop;
_scrollLeft = document.documentElement.scrollLeft;
}
function OnMouseMove(event) {
window.scrollTo({
left: _scrollLeft + (_startX - event.clientX),
top: _scrollTop + (_startY - event.clientY)
});
}
function OnMouseUp() {
document.onmousemove = null;
}

<div id="wrapper">
<div id="dragable_content">
<img draggable='false' src="https://geology.com/world/world-map.gif" style="height:100rem;" />
</div>
</div>