将 jquery 可调整大小的句柄移出 div

Posted 2023-05-08

【中文标题】将 jquery 可调整大小的句柄移出 div

【英文标题】：Move jquery resizable handles out of the divs

【发布时间】：2013-05-12 16:23:05

【问题描述】：

我有 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 有水平和垂直居中的参数。

我有一个screenshot 我想做的事情。我希望白色手柄位于 div 之外，如屏幕截图所示。第二个 div 必须保持位置：绝对。还有一个 jsfiddle 包含我当前的代码。

请帮我把手柄移到 div 外面。

【问题讨论】：

这样的？ jsfiddle.net/U3bnS/4

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

【参考方案1】：

我不确定我是否理解你的问题。

但是有一个Fiddle。

我只更改了你的css。

【参考方案2】：

您需要将手柄的移动量超过您在css 中概述的范围。我整理了一下，你可以看到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;