Question

我正在尝试使用图片作为地图制作网站，并将链接展开，就像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>`

Answer 1

我真的会考虑using this plugin但是如果你想自己做的话这是一个带有遏制的可拖动的演示：

Demo

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

图像不可拖动（Jquery）

1 个答案:

Demo