图像不可拖动（Jquery）答案

【问题标题】：Image is not draggable (Jquery)图像不可拖动（Jquery）
【发布时间】：2016-04-11 22:36:53
【问题描述】：

我正在尝试使用图像作为地图制作网站，并让链接像 Google 地图中的标记一样展开。我已经使用 Jquery 使我的图像可拖动，但它超出了范围。

我希望用户能够平移图像并放大或缩小而不显示滚动条。图像必须保持在一定范围内，但不能像现在这样无限期地保持。

使用遏制选项不起作用，因为这会阻止拖动。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Projecto Aurora</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-  scale=1.0"> 
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" type="text/css" href="aurora.css">
<script>
$(function() {
$( "#draggable" ).draggable({ 
});
}); 
</script>
</head>
<body> 
    <div id="draggable">
    <img id="bg" src="imagens/Projecto-Aurora.jpg" alt="">        
 </div>  
</body>
</html>`

【问题讨论】：

标签： jquery draggable

【解决方案1】：

我真的会考虑 using this plugin 但如果你想自己做这里是一个可拖动的包含容器的演示：

Demo

$( "#draggable" ).draggable({
   containment: "parent",
});

【讨论】：

miro，感谢您的回答，这正是我想要的。下一步是将内容放入图像中，例如谷歌地图的标记，当用户按下它时，它会全屏显示视频（我也会尝试在用户悬停鼠标时显示运行视频的缩略图在标记上）...我如何将标记固定在图像的确定位置？请注意，图片是里斯本地图，而不是飞机项目；）