可调整大小导致其下方的其他元素移动答案

【问题标题】：Resizable is causing other elements below it to move可调整大小导致其下方的其他元素移动
【发布时间】：2015-07-17 15:12:55
【问题描述】：

我正在构建一个 UI，我需要有两个或更多可调整大小和可拖动的 DIV。我面临的问题是，当您调整 div 的大小时，最初位于其下方的所有其他 div 都在移动（改变它们的位置）。请参阅https://jsfiddle.net/2f8g93nn/4/ 我写了一个例子来说明我的意思。在该示例中，如果您将第二个 div 向右移动并调整第一个 div 的大小，则第二个 div 的位置将会改变。

jsfiddle.net 中的 HTML：

<!doctype html>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="Element" id = "FirstDiv"  class="ui-widget-content">
  <p>First DIV</p>
</div>
<div class="Element" id = "SecondDiv" class="ui-widget-content">
  <p>Second DIV</p>
</div>

jsfiddle.net 中的 Javascript：

   $(function() {
    $( ".Element" ).draggable();
     $( ".Element" ).resizable();   
  });

jsfiddle.net 中的 CSS：

.Element { 
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border:1px solid black; 
}

【问题讨论】：

标签： javascript jquery html draggable resizable

【解决方案1】：

为了我的意见，让事情变得简单，你为什么不使用标签......

这里是演示代码：https://jsfiddle.net/SeokKuan/2f8g93nn/8/

 <textarea  style="height: 100px;" placeholder="First Content"></textarea><br>

<textarea  class="form-control" style="height: 100px;" placeholder="Second Content"></textarea>

nn/8/

【讨论】：

我没听懂？你能解释一下吗

【解决方案2】：

您应该将position: absolute; 用于应该独立放置到页面中的元素

https://jsfiddle.net/2f8g93nn/5/

【讨论】：

【解决方案3】：

我也推荐使用 CSS 属性

position:absolute

但是你必须在加载后重新排列元素，否则它们会重叠。我为此做了一个快速的 jsfiddle 示例： https://jsfiddle.net/hanno_drefke/2f8g93nn/9/

希望这对你有帮助。

【讨论】：

【解决方案4】：

我想出的答案是通过添加：

$('.ui-resizable').removeClass( "ui-resizable" )

【讨论】：