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

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

javascript jquery html

Javascript 可调整大小会导致其下方的其他元素移动,javascript,jquery,html,draggable,resizable,Javascript,Jquery,Html,Draggable,Resizable,我正在构建一个UI，其中需要有两个或更多可调整大小和可拖动的div。我面临的问题是，当你调整一个div的大小时，原来在它下面的所有其他div都在移动（改变它们的位置）。请看我在哪里写了一个例子来说明我的意思。在该示例中，如果将第二个div向右移动并调整第一个div的大小，则第二个div的位置将更改 jsfiddle.net中的HTML： <!doctype html> <script src="//code.jquery.com/jquery-1.10.2.js">

我正在构建一个UI，其中需要有两个或更多可调整大小和可拖动的div。我面临的问题是，当你调整一个div的大小时，原来在它下面的所有其他div都在移动（改变它们的位置）。请看我在哪里写了一个例子来说明我的意思。在该示例中，如果将第二个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>

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

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

jsfiddle.net中的CSS：

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

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

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

您应该使用

位置：绝对
我还建议使用CSS属性
position:absolute

但加载后必须重新排列元素，否则它们会重叠。
我为此制作了一个快速的JSFIDLE示例：

希望这能对你有所帮助。
根据我的意见，让事情变得简单一点，你为什么不使用标签
以下是演示代码：



我想出了一个有效的答案，那就是添加：
$('.ui-resizable').removeClass( "ui-resizable" )

我不明白？你能再解释一下吗