Переместить дескрипторы изменяемого размера jquery из div

У меня 3 дива. Один внутри другого.

JQuery

    $(function() {
        $("#div1").resizable({
            handles: "n, e, s, w, nw, ne, sw,se"
        });
        $("#div1").draggable();
    });

HTML

<div id="div1" style="left: 2px; top: 2px; z-index: 2; width: 100px; height: 70px; background-color: black">
    <div id="div2" style="width: 100%; height: 100%; background-color: green; position: absolute;">
        <div id="div3" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);">
            text
        </div>
    </div>
</div>

CSS

.ui-resizable-handle { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; }
.ui-resizable-n { top: 1px; left: 50%; }
.ui-resizable-e { right: 1px; top: 50%; }
.ui-resizable-s { bottom: 1px; left: 50%; }
.ui-resizable-w { left: 1px; top: 50%; }
.ui-resizable-nw { left: 1px; top: 1px; }
.ui-resizable-ne { top: 1px; right: 1px; }
.ui-resizable-sw { bottom: 1px; left: 1px; }

Как видите, div1 изменяется по размеру, перетаскивается и имеет абсолютную ширину и высоту. Div2 имеет 100% ширину и высоту и имеет абсолютное положение. Div3 имеет параметры для центрирования по горизонтали и вертикали.

У меня есть скриншот того, что я хочу сделать. Я хочу, чтобы белые ручки находились за пределами div, как показано на скриншоте. Второй div должен оставаться с position:absolute. Существует также jsfiddle, который содержит мой текущий код.

Пожалуйста, помогите мне переместить ручки за пределы div.


javascript jquery jquery-ui resizable handles
person user2265529    schedule 17.05.2013    source источник
comment
что-то вроде этого? jsfiddle.net/U3bnS/4   -  person Pete    schedule 17.05.2013
comment
Используйте отрицательные значения (например, right:-5px;), чтобы установить правильное положение. Я обновил ваш пример. JSFiddle   -  person Eich    schedule 17.05.2013

Ответы (2)


arrow_upward
3
arrow_downward

Я не уверен, что понимаю ваш вопрос.

Но есть Fiddle.

Я изменил только ваш css.

person Jorge Loureiro    schedule 17.05.2013

arrow_upward
2
arrow_downward

Вам нужно переместить рукоятку больше, чем у вас есть в css, который вы обрисовали в общих чертах. Я немного подправил его, и вы можете видеть это здесь

.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
}
.ui-resizable-n, .ui-resizable-s {
    left:50%;
}
.ui-resizable-e, .ui-resizable-w {
    top:50%;    
}

.ui-resizable-se {
    right: -5px;
    bottom: -5px;
}
person ediblecode    schedule 17.05.2013