jQuery UI zmiany rozmiaru niestandardowych uchwytów, nie dzieci zmienionego elementu

Question

Potrzebuję niestandardowych uchwytów dla elementów skalowalnych interfejsu użytkownika jQuery UI, które nie są elementami podrzędnymi tego elementu. Próbowałem zrobić to tak, jak jest to udokumentowane na jQuery UI documentation page, ale nie mogę tego uruchomić i mam już niedobór pomysłów.

To jest mój przykład setup (nie działa):

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

przygotowałem prezentację tego problemu na codepen.io

Przeszukałem całą sieć, aby dowiedzieć się, jak zaimplementować coś takiego. Może ktoś tutaj to zrobił i może wskazać, czego mi brakuje?

Widziałem już this SO question, ale myślę, że nie jest to duplikat, ponieważ odpowiedź na to pytanie nie jest możliwa dla kodu produkcyjnego, jak stwierdził autor odpowiedzi.

Każda pomoc zostanie bardzo doceniona.

Answer 1

Nie jest to odpowiedź, na którą liczyłeś, ale - jest to otwarty (nierozwiązany) błąd z jQuery UI. http://bugs.jqueryui.com/ticket/9658

Aktualizacja: ten błąd został naprawiony w jQueryUI 1.11.4, który został wydany w marcu 2015.

Answer 2

Można spróbować tego obejścia. Wkładam dinamicznie div's w 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) 
     } 
    }); 
}