使用jQuery UI调整一个元素的大小来改变另一个元素的位置

Question

我正在尝试使用jQuery UI从标签中创建可重新划分和可拖动的行。

问题是，如果我添加两个标签并尝试调整第一个标签的大小，它会改变第二个标签的位置（但是如果我调整第二个标签的大小，它就不会改变第一个标签的位置< / em>的）。

如何在调整大小时防止标签更改其他标签的位置？

HTML：

<div id="main">
  <button id="s">add line</button>
</div>
<div id="line" class="hidden">
  <label class="dra"></label>
</div>

JS：

function makeline() {

  $t = $(".dra", "#line").clone(true).draggable().resizable({
    handles: "s, n"
  });

$("#main").append($t);
}
$("#s").click(function () {
  makeline();
});

CSS：

.dra {
  display: block;
  background-color:red;
  width: 7px;
  height: 80px;
  border: 1px solid red;
}
.hidden {
  display: none;
}
#main {
  border: 1px solid black;
  width:500px;
  height: 300px;
}

更新： JSFiddle

中的完整代码

Answer 1

如果您的标签是：

<div class="label">Lorem ipsum</div>

添加此CSS：

.label {
    white-space: nowrap;
}

Answer 2

这种情况正在发生，因为jQuery UI小部件默认将元素的位置设置为relative，将其保留在文档的正常流程中。您可以通过将position:absolute应用于以下元素来解决此问题：

.ui-resizable {
  position:absolute !important;
}

---

这将使它们堆叠在彼此之上而不是在另一个之上，因为它们不再处于正常流动中。您可以使用jQuery ui position()实用程序方法轻松解决此问题，如下所示：

＆＃13;

＆＃13;

$("#s").click(function() {
  $t = $("#line .dra").clone(true).draggable().resizable({
    handles: "s, n"
  })
  if ($("#main").find(".dra").length) {
    $t.position({
      at: "left bottom",
      of: "#main .dra:last"
    })
  };
  $("#main").append($t);
});

＆＃13;

.dra {
  display: block;
  background-color: red;
  width: 7px;
  height: 80px;
  border: 1px solid red;
}
.hidden {
  display: none;
}
#main {
  border: 1px solid black;
  width: 500px;
  height: 300px;
}
.ui-resizable {
  position: absolute !important;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="form-group">
  <label>ADD two line and RESIZE THE FIRST LINE it will scroll down the line added after it. NOW add a 3rd line and resize the second line it will scroll down the 3rd line and if you resize the very first line you added it will scroll down the other lines</label>
  <div id="main">
    <button id="s">add line</button>
  </div>
  <div id="line" class="hidden">
    <label class="dra"></label>
  </div>

＆＃13;

＆＃13;

＆＃13;

您可以根据需要调整定位。