拖动背景图像

Question

我正在尝试开发游戏地图。 整个地图是 6000 像素 x 6000 像素的单个图像。该地图也显示为 6000 像素 x 6000 像素的 div（容器）背景。 我的问题是使我的地图可拖动的最简单方法是什么，这样您就可以单击屏幕中间，然后拖动到两侧。

地图本身（div 容器）不应改变位置，因为我计划用 POI 填充它。 我不需要任何有趣的人员，例如缩放等，只是用户不需要使用网页中的滑块进行导航，只需单击地图并左/右/上/下拖动即可移动。

抱歉，如果之前回答过这个问题，我找不到答案。

Answer 1

这是一个最小的示例，它允许在 div 内拖动图像

$('#draggable').draggable();

#container {
  width: 400px;
  height: 400px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="container">
  <img id="draggable" src="https://picsum.photos/100/100" />
</div>