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

标签 javascript jquery html draggable resizable

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

最佳答案

就我的观点而言,让事情变得简单,你为什么不使用标签...

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

关于javascript - 可调整大小导致其下方的其他元素移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30094425/

相关文章:

html - 我可以使用 :before or :after pseudo-element on an input field? 吗

html - 如何创建一个在所有浏览器中运行的发出彩色光效的圆形图像?

javascript - 使用简单的 JavaScript

jquery - 使用 jQuery mobile 将内容设置为全屏,没有溢出或滚动

javascript - Tablesorter 动态设置输出小部件选项

javascript - 如何在最后一次出现特定字符后删除字符串的特定部分?

javascript - 悬停在图像上的效果

javascript - JavaScript 无法提取 CSS 值

javascript - jQuery/Javascript if 语句速度

javascript - 单击按钮时暂停和播放 setInterval()