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

请帮我移动div外的手柄。

来源

2013-05-17 user2265529

这样的事情？ http://jsfiddle.net/U3bnS/4/ – Pete

使用负值（例如'right：-5px;'）设置正确的位置。我更新了你的例子。 [的jsfiddle]（http://jsfiddle.net/U3bnS/2/） – Eich

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

但是有一个Fiddle。

我只更换了您的css。

来源

2013-05-17 13:32:56

您需要移动的手柄比您在概述的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; 
}

来源

2013-05-17 13:36:24 ediblecode

移动div的可调整大小的手柄

回答

相关问题