Question

我正在使用JQuery Draggable plugin。我正在尝试创建一个图像编辑控件，用户可以在其中移动（并最终调整大小）可拖动图像。如果你看demo here，你会看到你可以拖动灰色框，如果它超出框架的边界，你会看到滚动条出现，你可以继续拖动。我想在没有滚动条的情况下实现相同的功能。你应该能够拖动图像，如果图像超出框架的边界，它应该看起来在框架下滑动。框架不应该变大，或者出现滚动条。我认为这应该是可能的，但我找不到使用我找到的文档的方法。这是我的代码：

<head>
<meta charset="UTF-8" />
<title></title>
    <style type="text/css">
        #draggable { width: 400px; height: 300px; cursor:pointer;}
        #container{overflow:hidden; height: 500px; width: 500px; border: solid 1px black;}
        #slider{margin: 10px; border: solid 1px black; height: 300px; vertical-align:middle;}
    </style>

      <%--came from http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js--%>
    <script src="scripts/jquery.js" type="text/javascript"></script>

    <%--came from //ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js--%>
    <script src="scripts/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">
          $(document).ready(function() {
              $("#draggable").draggable({ opacity: 0.35 }); //, helper: 'original', containment: 'parent'
          });
    </script>
</head>

<body>
    <div id="container">
        <img  id="draggable" src="images/96.jpg" width="400px" height="300px" alt="Click this image to drag it around" />
    </div>
</body>

问题：如何在拖动时让可拖动的<img>显示在父<div>下滑动 - 但没有显示滚动条？

更新：我想的越多，我认为我应该重新提出问题。我真正想要做的是让我的父<div>标记像我的可拖动<img>周围的掩码/剪切路径。内部图像实际上可能比<div>大，但只有<div>中的图像可见。您可以根据需要在<img>内拖动<div>。

Answer 1

的 @bOkeifus is right. Check out this working jsFiddle demo: 的

<强> JS：

$(document).ready(function() { $("#draggable").draggable({ opacity: 0.35 }); });

<强> HTML：

<div id="container"> <img id="draggable" alt="Click this image to drag it around" src="http://gallery.photo.net/photo/12355172-md.jpg" width="400px" height="300px" /> </div>

<强> CSS：

#container { overflow: hidden; height: 500px; width: 500px; border: solid 1px black; }

Answer 2

的 @bOkeifus is right. Check out this working jsFiddle demo: 的

<强> JS：

$(document).ready(function() { $("#draggable").draggable({ opacity: 0.35 }); });

<强> HTML：

<div id="container"> <img id="draggable" alt="Click this image to drag it around" src="http://gallery.photo.net/photo/12355172-md.jpg" width="400px" height="300px" /> </div>

<强> CSS：

#container { overflow: hidden; height: 500px; width: 500px; border: solid 1px black; }

JQuery Draggable - 约束父级，但允许在父级下滑动？

2 个答案: