I have 3 divs. One inside the other.

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

As you can see the div1 is resizable,draggable and has absolute width and height. Div2 has 100% width and height and has absolute position. Div3 has the parameters to be centered horizontally and vertically.

I have a screenshot of what i want to do. I want the white handles to be outside the div like shown in the screenshot. The second div must stay with position:absolute. There is also a jsfiddle that contains my current code.

Please help me move the handles outside of the div.

I have 3 divs. One inside the other.

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

As you can see the div1 is resizable,draggable and has absolute width and height. Div2 has 100% width and height and has absolute position. Div3 has the parameters to be centered horizontally and vertically.

I have a screenshot of what i want to do. I want the white handles to be outside the div like shown in the screenshot. The second div must stay with position:absolute. There is also a jsfiddle that contains my current code.

Please help me move the handles outside of the div.

• javascript
• jquery
• jquery-ui
• resizable
• handles

• something like this? jsfiddle/U3bnS/4 – Pete Commented May 17, 2013 at 13:30
• Use negative values (f. e. right:-5px;) to set the correct position. I've updated your example. JSFiddle – Eich Commented May 17, 2013 at 13:31

2 Answers 2

I'm not sure if I understand your question.

But there is a Fiddle.

I've change only your css.

You need to move the handle's by more than you have in the css you've outlined. I've tidied it up a bit and you can see that here

.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;
}