拖动背景图像

Posted 2023-05-08

【中文标题】拖动背景图像

【英文标题】：Drag over a background image

【发布时间】：2014-02-14 19:35:11

【问题描述】：

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

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

对不起，如果以前回答过这个问题，我找不到答案。

【问题讨论】：

也许这个问题有帮助：***.com/q/8569095/1741542。否则，您可能需要查看 jquery-ui 可拖动：jqueryui.com/draggable

嗯，我看到了可拖动的 jqueryui，但我认为它只允许拖动 div 单位。我稍后会检查它，但我的经验为零。

【参考方案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

【讨论】：

您好，感谢您的贡献，但此解决方案不适用于我的 POI。此地图用于游戏，因此它将加载游戏对象的位置，例如咖啡店，地图上将有一个坐标为示例 554,1345.99 的点/感觉。

@user3230057 将所有对象和地图包装在另一个 div 中，然后您可以使用此解决方案。

哦，你的意思是地图和点一起移动？聪明:)