jQuery UI изменить размер пользовательских дескрипторов, а не дочерних элементов с измененным размером.

Question

Мне нужны пользовательские дескрипторы для jQuery UI изменяемых размеров элементов, которые не являются дочерними элементами этого элемента. Я пробовал делать это так, как это документировано на jQuery UI documentation page, но я не могу заставить это работать, и у меня заканчиваются идеи, почему.

Это мой пример установки (не работает):

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

Я искал по всей сети примеры того, как реализовать что-то подобное. Может быть, кто-то здесь сделал это и мог указать, что мне не хватает?

Я уже видел this SO question, но я думаю, что это не дубликат, потому что ответ на этот вопрос невозможен для производственного кода, как указано автором ответа.

Любая помощь была бы принята с благодарностью.

Answer 1

Не тот ответ, на который вы надеялись, но - это открытая (неразрешенная) ошибка с пользовательским интерфейсом jQuery. http://bugs.jqueryui.com/ticket/9658

Update: эта ошибка была исправлена ​​в jQueryUI 1.11.4, который был выпущен в марте 2015 года

Answer 2

Вы можете попробовать это обходной путь. Я вставляю dinamically div's в 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 $ (документ) .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) 
     } 
    }); 
}