jQuery UI调整自定义句柄的大小，而不是调整大小的元素的子对象

Question

我需要为不是该元素的子元素的jQuery UI可调整大小的元素提供自定义句柄。我试着按照jQueryUI文档页面上记录的方式来做，但我无法做到这一点，而且我也不知道为什么。

这是我的示例设置（不工作）：

HTML

<div id="wrapper">
  <div id="resize-me"></div>
</div>
<div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div>

JS

$('#resize-me').resizable({
  handles: {
    n: $('#n-resize-handle'),
    e: $('#e-resize-handle'),
    s: $('#s-resize-handle'),
    w: $('#w-resize-handle'),
    ne: $('#ne-resize-handle'),
    se: $('#se-resize-handle'),
    sw: $('#sw-resize-handle'),
    nw: $('#nw-resize-handle')
  }
});

我在codepen.io 上准备了这个问题的演示

我在网上到处搜索如何实现这样的东西的例子。也许这里有人这样做了，可以指出我遗漏了什么？

我已经看到了这个SO问题，但我认为它不是重复的，因为正如答案的作者所说，这个问题的答案对于生产代码来说是不可行的。

如有任何帮助，我们将不胜感激。

Answer 1

您可以尝试此解决方法。我在div中插入div，调整大小。

HTML

<div id="wrapper">
    <div id="resize-me"></div>
</div>
<div id="divHandles">
    <div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div>
</div>

JS$（文档）.ready（函数（）{appliResize（"#调整我的大小"）；})；

function appliResize(elementName){
        $.each($("#divHandles").find(".ui-resizable-handle"), function (index, value){
           $(elementName).append($(value).clone().attr('id',$(value).attr('id')+elementName.slice(1)));
    });
    $('#resize-me').resizable({
        handles: {
            n: '#n-resize-handle'+elementName.slice(1),
            e: '#e-resize-handle'+elementName.slice(1),
            s: '#s-resize-handle'+elementName.slice(1),
            w: '#w-resize-handle'+elementName.slice(1),
            ne: '#ne-resize-handle'+elementName.slice(1),
            se: '#se-resize-handle'+elementName.slice(1),
            sw: '#sw-resize-handle'+elementName.slice(1),
            nw: '#nw-resize-handle'+elementName.slice(1)
        }
    });
}

Answer 2

不是您所希望的答案，但这是jQuery UI的一个开放（未解决）错误。http://bugs.jqueryui.com/ticket/9658

更新：此错误已在2015年3月发布的jQueryUI 1.11.4中修复。