可调整大小导致其下方的其他元素移动
Posted
技术标签:
【中文标题】可调整大小导致其下方的其他元素移动【英文标题】：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;
【问题讨论】：
【参考方案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" )
【讨论】：
以上是关于可调整大小导致其下方的其他元素移动的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery UI 获取可拖动和可调整大小元素的坐标