Question

我有一个jQuery可调整大小的问题。

看看这个JSFiddle。即使包含设置为#outerContainer，当我尝试通过其下部或上部手柄拖动child（蓝色框）时，其顶部位置也被强制为0，即使它很好在红框的范围内。

任何线索？

以下是代码，以防万一：

HTML

<div id='outerContainer'>
    <div id='margin'></div>
    <div id='parent'>
        <div id='child'></div>
    </div>
</div>

CSS

#outerContainer {
    position:relative;
    border: 1px solid red;
}

#margin {
    height:25px;
}

#parent {
    position: relative;
    width: 50px;
    height: 200px;
    border: 1px solid black;
}

#child {
    position: absolute;
    top: -20px;
    width:40px;
    height:50px;
    border: 1px solid blue;
}

JS

$('#child').resizable({handles: 'n, s', containment: '#outerContainer', grid: [10, 10]});

Answer 1

在CSS中，top: -20px被视为偏移值，这就是为什么你必须将与另一个元素相关联才能使用它（aka { {1}}）

当您单击其上边框上的调整大小时，它必须还原其position: relative / absolute / fixed值，以便您有机会进行调整。您没有使用调整大小更改元素的top或width，而是将其移动到新位置。

长话短说，使用height代替margin-top而你是金色的。

top

Demo Fiddler

jQuery resizable强制元素顶部为＆gt; = 0

1 个答案:

Demo Fiddler