问题描述
|
我正在使用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>
问题:如何在拖动时使可拖动的ѭ1看起来在父<div>
下滑动-但没有出现滚动条?
更新:我对这个问题的思考越多,我就应该重新提出我的问题。我真正想做的是使我的父母<div>
标签像可拖动的<img>
周围的遮罩/剪切路径一样。里面的图片实际上可能比<div>
大,但只有<div>
中的内容可见。您应该可以随意在<div>
内拖动<img>
。
解决方法
@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;
}
, 听起来您应该设置:
overflow:hidden;
以您的div风格。这应该阻止滚动条出现。