我正在尝试制作一个使用图像作为地图的网站，并将链接像谷歌地图中的标记一样展开。我已经使用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>`
我真的会考虑使用这个插件，但如果你想自己做的话这是一个带有遏制的可拖动的演示：
Demo
$( "#draggable" ).draggable({
containment: "parent",
});