JQuery Draggable - 限制到父级,但允许在父级下滑动?
Posted
技术标签:
【中文标题】JQuery Draggable - 限制到父级,但允许在父级下滑动?【英文标题】:JQuery Draggable - constrain to parent, but allow sliding under parent? 【发布时间】:2011-09-03 12:40:18 【问题描述】:我正在使用JQuery Draggable plugin。我正在尝试创建一个图像编辑控件,用户可以在其中移动(并最终调整大小)可拖动图像。如果您查看demo here,您会看到您可以拖动灰色框,如果它超出框架的范围,您会看到滚动条出现并且您可以继续拖动。我想在没有滚动条的情况下实现相同的功能。您应该能够拖动图像,如果图像超出框架的边界,它应该看起来在框架下滑动。框架不应变大,或出现滚动条。我认为这应该是可能的,但我还没有找到使用我找到的文档的方法。这是我的代码:
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#draggable width: 400px; height: 300px; cursor:pointer;
#containeroverflow:hidden; height: 500px; width: 500px; border: solid 1px black;
#slidermargin: 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" />
</div>
</body>
问题:如何让可拖动的<img>
在拖动时看起来滑到父级<div>
下方 - 但没有出现滚动条?
更新:我想得越多,我就越认为我应该重新提出我的问题。我真正想做的是让我的父母<div>
标签就像我的可拖动<img>
周围的蒙版/剪切路径。里面的图像实际上可能比<div>
大,但只有<div>
中的图像才会可见。您应该可以随意在<div>
内拖动<img>
。
【问题讨论】:
为了它的价值,我尝试更改父级<div>
上的z-index
和<img>
本身。似乎没有什么不同。
【参考方案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"
src="http://gallery.photo.net/photo/12355172-md.jpg"
/>
</div>
CSS:
#container
overflow: hidden;
height: 500px;
width: 500px;
border: solid 1px black;
【讨论】:
我再次更新以包含我的整个<body>
。它仍然可以让我将图像拖到<div>
容器之外。你能看出我做错了什么吗?
用<head></head>
包装你的样式和脚本。
如果这不能解决问题,请创建一个 jsFiddle 来重现您的错误。
尝试将<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" />
添加到您的头部。
是的,是的。我在***.com/questions/6144188/… 中向您展示的方式是最佳实践。是的,它们将永远保持不变。每次他们发布一个新版本时,它都是一个新文件,而旧版本仍然是为了向后兼容。【参考方案2】:
听起来你应该设置:
overflow:hidden;
在你的 div 的风格。这应该会阻止滚动条出现。
【讨论】:
感谢您的回复!这是个好主意,但我认为containment: 'parent'
可以防止溢出。添加overflow:hidden;
似乎没有什么不同。但是,如果我删除容器,它允许我拖到 div 之外,溢出可见。有什么想法吗?
@Lloyd - @bOkeifus 是对的。 +1。您将containment: 'parent'
删除并将overflow: hidden;
添加到容器中,您将获得所取得的结果。使用有效的 jsFiddle 演示查看我的答案。以上是关于JQuery Draggable - 限制到父级,但允许在父级下滑动?的主要内容,如果未能解决你的问题,请参考以下文章