jquery - jQuery Resizable 改变其他元素的位置

Question

我在一个父 div 中有 3 个 div，当您第一次想重新调整元素的大小时，其他元素的位置会发生变化， JSFIDDLE

这是我的代码：

HTML

<div class="parent">
<div class="element" >BOX1</div>
<div class="element" >BOX2</div>
<div class="element" >BOX3</div>
</div>

CSS

.parent { 
    width:300px;
    height:300px;
    background:#e0e0e0
}
.element {
    width:100px;
    height:20px;
    background:red;
}

JS

$(document).ready(function() {
    var x = 0;
    $('.element').each(function() {
        x++;
        $(this).draggable({
            containment: $('.parent')
        });
        $(this).resizable({
            containment: $('.parent')
        });
        $(this).css('left', x * 50);
        $(this).css('top', x * 50);
    });
});

JSFIDDLE

Answer 1

您的元素有一个position:relative，这意味着每次更改其中一个框时，它都会变为绝对并从页面流中“取出”，因此其他框向上移动以填充它留下的空间。

更改.element框以position:absolute;解决此问题。

.element {
width:100px;
height:20px;
background:red;
position:absolute;
}

示例：http: //jsfiddle.net/WRL8u/3/