jQuery UI resize custom handles, not children of the resized element

Question

I need to have custom handles for jQuery UI resizable elements that are not children of this element. I tried doing it the way it's documented on jQuery UI documentation page but I can't get this to work and am running out of ideas why.

This is my example setup (not working):

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

I prepared demo of this problem on codepen.io

I searched all over the net for examples of how to implement something like that. Maybe someone here has done that and could point out what I'm missing?

I already seen this SO question but I think it's not a duplicate because the answer to that is not viable for production code, as stated by the answer's author.

Any help would be greatly appreciated.

Answer 1

You can try this workaround. I Insert dinamically div´s in div resize-me.

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