移动jquery可调整大小的手柄出div元素

Question

我有3个div。一个在另一个里面。

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必须保持绝对定位。还有一个jsfiddle包含我的当前代码。

请帮助我将手柄移出div。

- user2265529

---

类似于这样？http://jsfiddle.net/U3bnS/4/ - Pete

使用负值（例如 right:-5px;）来设置正确的位置。我已经更新了你的示例。JSFiddle - Eich

Answer 1

我不确定我是否理解你的问题。但是有一个Fiddle。我只改变了你的css。

- Jorge Loureiro

Answer 2

您需要将句柄移动超过您在所概述的 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;
}

- ediblecode