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

【问题标题】：Resizing one element using jQuery UI changing the position of another使用 jQuery UI 调整一个元素的大小来改变另一个元素的位置
【发布时间】：2014-11-24 09:32:27
【问题描述】：

我正在尝试使用 jQuery UI 从标签中制作可调整大小和可拖动的线条。

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

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

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

【问题讨论】：

您的问题是您的标签上有position: relative。我没有解决办法。
新行是否必须出现在前一行的下方..？
不，我不只是想调整它们的大小而不改变其他元素的位置

标签： javascript jquery css jquery-ui jquery-ui-resizable

【解决方案1】：

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

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

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

$("#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);
});

.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;
}

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

您可以随意调整位置。

【讨论】：

【解决方案2】：

如果你的标签是：

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

添加这个 CSS：

.label {
    white-space: nowrap;
}

【讨论】：