Question

我正在构建一个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; 
}

At the begining Second div is below first div

We moved the second div to the right

By increasing the size of the first div the position of the second div changed

Answer 1

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

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

Answer 2

对于我的观点并简化，为什么不使用标签...

以下是演示代码：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>

ン/ 8 /

Answer 3

我还建议使用CSS属性

position:absolute

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

希望这对你有所帮助。

Answer 4

我提出的答案是有效的，可以补充一下：

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

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

4 个答案: