拖动背景图像

Question

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

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

很抱歉，如果以前回答过，我找不到答案。

Answer 1

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

<div id="container">
    <img id="draggable" src="http://lorempixel.com/800/800" />
</div>

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

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

查看完整的JSFiddle