Пользовательский интерфейс jQuery изменяет размеры пользовательских дескрипторов, а не дочерние элементы измененного размера

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

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

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, но я думаю, что это не дубликат, потому что ответ на этот вопрос невозможен для производственного кода, как заявил автор ответа.

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

Ответ 1

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

Обновить: эта ошибка была исправлена в jQueryUI 1.11.4, которая была выпущена в марте 2015 года.

Ответ 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 $ (document).ready(function() { 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)
        }
    });
}