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/