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