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

Question

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

我有图像元素，使用 jQuery UI 设置为 resizable()。为了设置自定义句柄，它们需要是可调整大小元素的子元素。然而，这对于图像元素是不可能的。

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

The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

我的 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