使用角落中的框手柄调整元素大小答案

【问题标题】：Resize Element with box handles in corners使用角落中的框手柄调整元素大小
【发布时间】：2012-07-10 20:34:41
【问题描述】：

在Jcrop中，选择裁剪区域后，会出现一个div，边角有框柄。

是否有任何 jQuery 插件可以构建这种类型的框句柄？

【问题讨论】：

句柄是 CSS！使用与插件挂钩的 ID。做一个你自己会很容易。以 jcrops CSS 文件为例

标签： jquery handle jcrop

【解决方案1】：

您可以使用 jQuery UI Resizable 插件：

http://jqueryui.com/demos/resizable/

使用“handles”参数使您的元素在整个边框上都可以调整大小。

【讨论】：

再次......这个答案很好 - 但您需要使用 CSS 添加您自己的“Box Handles”。不难。

【解决方案2】：

您可以使用上面提到的 jQuery UI 的可调整大小。我什至为你设置了一个小提琴！

http://jsfiddle.net/digitalaxis/j2JU6/

jQUERY

$('#element').resizable({
    handles: {
    'ne': '#negrip',
    'se': '#segrip',
    'sw': '#swgrip',
    'nw': '#nwgrip'
    }
});

HTML

<div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
<div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
<div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
<div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>

CSS

#elementResizable {
    border: 1px solid #000000;
    width: 300px;
    height: 40px;
    overflow: hidden;
}
#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
}
#segrip {
    right: -5px;
    bottom: -5px;
}

【讨论】：

干得好@Randy。这是一个更完整的示例，完成您开始的内容：jsfiddle.net/j2JU6/440