jQuery可调整大小的问题(带滚动的相对div中的绝对div)

时间:2012-02-04 18:31:26

标签: jquery css jquery-ui jquery-resizable

我有以下基本布局:

<div class="Container">
    <div class="Content"></div>
    <div class="Selector"></div>
</div>

我们的想法是选择器div正在标记内容中的某个区域,并且该区域可以调整大小:

div.Container
{
    border: 2px solid #00F;
    width: 240px;
    height: 300px;
    overflow: auto;
    position: relative;
}

div.Selector
{
    position: absolute;
    top: 0px !important;
    left: 80px;
    width: 50px;
    height: 500px;
    border-left: 2px solid #F00;
    border-right: 2px solid #0F0;
    z-index: 10000;
}

div.Content
{
    height: 500px;
    border: 1px solid #DEDEDE;
   background-color: #EFEFEF; 
}

可调整大小的选择器:

$(document).ready(function() {
    $("div.Selector").resizable();
});

这个问题可以在这里看到 - http://jsfiddle.net/sXqbV/2/ - 当容器水平滚动时会发生。

调整div的大小后(稍微拖动右边缘),其左侧位置会减小(相对于滚动位置):

enter image description here

我在垂直滚动方面遇到了类似的问题,但我通过将!important添加到顶部样式来解决它。我不能用左边的位置来做,因为我可能还需要它从左边可以调整大小。

如何解决此问题?

1 个答案:

答案 0 :(得分:4)

我从未使用过resizable,我只是浏览了它的代码并找到了它。 (所以不要问我为什么)

$(document).ready(function() {
    $("div.Selector").resizable({containment: $('div.Container')}); 
});

请参阅fiddle