jQuery UI - 可调整大小图像的自定义句柄

Question

是的，这是一个问题 - 如何为可调整大小的img元素设置自定义句柄？

我有image元素，使用jQuery UI设置为resizable（）。为了设置自定义句柄，它们必须是可调整大小元素的子元素。但是这对于图像元素是不可能的。

jQuery UI文档指定您还可以从可调整大小的元素外部设置句柄： http://api.jqueryui.com/resizable/#option-handles

  

任何指定的值应该是一个jQuery选择器，匹配resizable的子元素以用作该句柄。如果句柄不是resizable的子句，则可以直接传入DOMElement或有效的jQuery对象。

我的JSFiddle：http://jsfiddle.net/asavin/2LXG8/3/

JS：

$('#elementResizable').resizable({
    handles: {
        'nw': '#nwgrip',
            'ne': '#negrip',
            'sw': '#swgrip',
            'se': '#segrip',
            'n': '#ngrip',
            'e': '#egrip',
            's': '#sgrip',
            'w': '#wgrip'
    }
});

您可以看到句柄，但它们没有做任何事情。

这是关于SO的另一个相关问题，也没有回答： jQuery UI resize custom handles, not children of the resized element

我也愿意接受其他解决方案。关键是要使图像可调整大小，并拥有自定义句柄。

Answer 1

要调整图片大小，您可以这样做：

    <div id="mydiv" style="display:inline-block">
        <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
    </div>

使用JS：

$('#image').resizable();

以下是一个示例：http://jsfiddle.net/kris92/3CfwG/

编辑：我仍在寻找关于自定义句柄的好答案......

编辑：刚刚在这里找到了重复内容 Resizable handles with jQueryUI

Answer 2

您必须在调用resizable（）后修改处理程序。因为resizable（）总是包装在img上，所以请参阅source code。