Jquery Draggable和Resizable在同一个元素上

Question

我有一个<div class="outerDiv"></div>，我正在动态添加另一个div，我想在此outerDiv

中进行可拖动和调整大小

.isStore是div的css类，我想制作可拖动和可调整大小。

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" }); 

问题是我无法将div调整为OuterDiv的全宽

在上面的快照中，带有网格的div为outerDiv，红色显示可拖动和可调整大小的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;
 }

有什么我想念的吗？

Answer 1

您可能希望使用浏览器的开发人员工具来确定是否定义了一些约束（例如CSS max-height / max-width可能？）。如果您使用的是Chrome，则可以右键单击该元素并查看“样式/已计算”选项卡以查看它可能正在拾取的内容。当解决这样的问题时，它有助于简化示例并逐渐增加复杂性。

这个使用这个简单的例子（没有CSS max约束）就可以了：

＆＃13;

＆＃13;

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });

＆＃13;

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这可以通过添加CSS max-height和max-width约束来模拟您的问题。

＆＃13;

＆＃13;

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });

＆＃13;

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  max-height: 100px;
  max-width: 100px;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以尝试将这些样式设置为auto，如下所示：

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  max-height: auto;
  max-width: auto;
}