我有一个<div class="outerDiv"></div>
,我正在动态添加另一个div
,我想在此范围内使其可拖动以及可调整大小outerDiv
.isStore
是div的CSS类,我要使其可拖动和可调整大小。
$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
问题是我无法将尺寸调整div
为OuterDiv
在上面的快照中,div
with网格是outerDiv
and红色表示div
可以拖动和调整大小,但这是我可以调整的最大大小。我希望它在整个范围内调整大小outerDiv
。
我正在使用的CSS是
.outerDiv
{
width: 202px;
overflow:auto;
overflow: auto;
display:inline-block;
}
.isStore
{
height: 10px;
width: 10px;
background-color: #fff7f8;
border: 1px SOLID;
float: left;
position:absolute;
}
有什么我想念的吗?
您可能要使用浏览器的开发人员工具来确定是否定义了一些约束(例如CSS max-height
/max-width
也许?)。如果您使用的是Chrome浏览器,则可以右键单击该元素,然后查看“样式/计算”标签,以查看可能要使用的内容。解决此类问题时,它有助于简化示例并逐步增加复杂性。
这个简单的示例可以正常工作(没有CSSmax
约束):
$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
width: 20px;
height: 20px;
background-color: red;
}
.outerDiv
{
width: 160px;
height: 160px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div></div>
这通过添加CSSmax-height
和max-width
约束来模拟您的问题。
$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
width: 20px;
height: 20px;
background-color: red;
max-height: 100px;
max-width: 100px;
}
.outerDiv
{
width: 160px;
height: 160px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div></div>
您可以尝试将这些样式设置为auto
如下所示:
.isStore
{
width: 20px;
height: 20px;
background-color: red;
max-height: auto;
max-width: auto;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句