Изменяемый размер jQuery заставляет вершину элемента быть> = 0

Question

Изменяемый размер jQuery заставляет вершину элемента быть> = 0

0

У меня проблема с jQuery resizable.

Посмотрите на этот JSFiddle. Несмотря на то, что для сдерживания установлено значение #outerContainer, когда я пытаюсь перетащить child #outerContainer (синий ящик) с помощью своего нижнего или верхнего дескриптора, его верхнее положение будет равным 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]});

W.B. 16 дек. 2013, в 00:51

Источник

Теги:

jquery

jquery-ui-resizable

1 ответ

Ещё вопросы

Deryck · Answer 1 · 2013-12-15T21-21-00.000Z

В CSS top: -20px считается значением смещения, поэтому вы должны связать его с другим элементом, чтобы иметь возможность использовать его (aka position: relative/absolute/fixed)

Когда вы нажимаете размер на верхней границе, он должен вернуть свое top значение, чтобы дать вам возможность его отрегулировать. Вы не изменяете width или height элемента с этим изменением размера, вы перемещаете его на новую позицию.

Короче говоря, используйте margin-top вместо top а вы золотой.

#child {
    position: absolute;
    margin-top: -20px;
}

Демо-скрипач

Я до сих пор не понимаю. Я знаю, что это смещение, но я не знаю, почему, черт возьми, он должен вернуть свое верхнее значение в 0? Тем более , что когда вы удалите защитную оболочку, все будет хорошо, а jquery доволен отрицательным верхним смещением, что само по себе не является ошибкой, не так ли?
Но спасибо за подсказку на полях, я прибегну к этому, если придется :)