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/

jQuery Resizable改变了其他元素的位置

1 个答案: