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

我需要为jQuery UI可resize的元素提供自定义句柄，这些元素不是此元素的子元素。 我尝试按照它在jQuery UI文档页面上记录的方式进行操作，但是我无法让它工作，并且我已经没有想法了。

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

HTML

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上准备了这个问题的演示

我在网上搜索了如何实现类似的例子。 也许有人这样做了，可以指出我错过了什么？

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

任何帮助将不胜感激。

Answer 1

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

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

Answer 2

您可以尝试此解决方法。 我在div resize-me中插入dinamically div。

HTML

JS $（document）.ready（function（）{appliResize（“＃resize-me”）;}）;

 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) } }); }