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

Question

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

HTML 在 jsfiddle.net:

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

Javascript 在 jsfiddle.net:

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

CSS 在 jsfiddle.net:

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

Answer 1

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

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

Answer 2

我还建议使用 CSS 属性

position:absolute

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

希望这对您有所帮助。

Answer 3

根据我的意见，为了简单起见，你为什么不使用标签...

这里是演示代码：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/

Answer 4

我想出的答案是添加：

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

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

Resizable is causing other elements below it to move

html

javascript

jquery

draggable

resizable