3

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

<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>。

4

2 回答 2

3

听起来你应该设置：

overflow:hidden;

在你的 div 的风格。这应该会阻止滚动条出现。

于 2011-05-27T19:08:01.813 回答
3

@bOkeifus 是对的。查看这个有效的 jsFiddle 演示：

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;
}
于 2011-05-27T19:30:03.900 回答