jquery如何为可拖动图像设置限制答案

【问题标题】：jquery how to set limits for a draggable imagejquery如何为可拖动图像设置限制
【发布时间】：2013-12-12 21:02:35
【问题描述】：

我有一个可拖动的图像，但我无法将图像的边界设置为 1728 x 972。

</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script>
$(function() {
    $("#upperMall").draggable();
});

</script>

<body>

<div id="upperMall"><img alt="" height="972" src="images/UpperMall.png" width="1728"></div>
</body>

【问题讨论】：

你想达到什么目的？图像的边界是什么意思？
@Irvin 如果我将图像向右或向下拖动。它扩展了网页并添加了滚动条。我试图让它在网页上的设定空间内可拖动。
图片比容器div大？您想在 div 内移动图像吗？
@Irvin 我想是的。所以有一个图像是可拖动的修复“框”。它只是为了在您将图像拖动到该方向时阻止网页向右扩展并拥有。

标签： jquery html image draggable boundary

【解决方案1】：

在脚本中编辑这个

$("#upperMall").draggable({ containment: "#container", scroll: false });

在upperMalldiv外添加一个容器div

<div id="container">
    <div id="upperMall">
       .
       .
       .
     </div>

</div>

使容器 div 比 upperMall div 大

CSS

body{overflow-x:hidden}

试试这个..

【讨论】：

这会阻止图像被拖动
我知道..我已经编辑了我的答案..你只需要在upperMall Div之外添加一个div..N确保upperMall div在Dimension中小于Container Div...跨度>
它在一定程度上起作用。抱歉，我不清楚。我希望它受容器 div 的限制，但仍然可以拖动它。因此，如果我将图像向右拖动，它不会扩展网页，但我将能够将它一直向右拖动。如果我向右拖动它，超出边界的部分将不可见
你可以尝试添加 css 并使 body overflow-x:hidden。像这样.. body{overflow-x:hidden} 它不会让网页水平扩展