2012-02-04 1 views
3

У меня есть следующий основной макет:Проблемы с JQuery Resizable (абсолютного DIV в пределах относительного DIV с свитком)

<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(); 
}); 

проблема, белым ich можно увидеть здесь - http://jsfiddle.net/sXqbV/2/ - происходит, когда контейнер горизонтально прокручивается.

После того, как DIV изменении размеров (слегка перетащить его правый край), его левое положение уменьшается (относительно положения прокрутки):

enter image description here

У меня была аналогичная проблема с вертикальной прокрутки , но я решил это, добавив !important в верхний стиль. Я не могу сделать это с левой позицией, потому что мне, вероятно, понадобится изменить размер слева и слева.

Как исправить эту проблему?

ответ

4

Я никогда не использовал изменяемый размер, я просто просмотрел его код и нашел его. (Так что не спрашивайте меня, почему)

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

См fiddle

+0

Это действительно решить эту проблему я описывал, но теперь есть новая проблема - при попытке перетащить в то время как контейнер вертикально прокрутки высота селектора теперь уменьшается (поэтому линии не достигают дна). – Amit

+0

Теперь вы можете сбросить '! Important', см. [Скрипка] (http://jsfiddle.net/orig/UMhE2/1/) – ori

+0

Ницца, спасибо. – Amit