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

【问题标题】：jQuery UI - custom handles for resizable imagejQuery UI - 可调整大小图像的自定义句柄
【发布时间】：2013-12-04 15:30:09
【问题描述】：

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

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

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

任何指定的值都应该是一个与可调整大小的子元素匹配的jQuery选择器，以用作该句柄。如果句柄不是可调整大小的子对象，则可以直接传入 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

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

【问题讨论】：

尝试让它工作的任何成功？我也有类似的问题。

标签： html css jquery-ui

【解决方案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

【讨论】：

那么问题正是关于如何获取图像的自定义句柄。
我的猜测是其中的“and”语句有两个问题；）

【解决方案2】：

您必须在调用 resizable() 后修改处理程序。因为 resizable() 总是包裹在 img 上，见source code。

【讨论】：