После небольшого копания в коде jquery-ui я думаю, что могу подтвердить, что пользовательский дескриптор вне изменяемого размера элемента не работает.
Проблема в том, что события мыши инициализируются для элемента с изменяемыми размерами (или элемента-оболочки в случае textarea). Если дескриптор не является потомком, где обрабатываются события мыши, он не будет вызывать событие mousedown на дескрипторе, что не делает его перетаскиваемым.
В качестве доказательства концепции я немного повозился в jquery-ui, пока не начал что-то (вроде) работать. Нет никаких гарантий относительно кода, но он должен указывать, какие изменения должны произойти, чтобы заставить его работать.
Вокруг строки 140 в ui.resizable.js я изменил:
this._handles = $('.ui-resizable-handle', this.element)
.disableSelection();
до
this._handles = $('.ui-resizable-handle')
.disableSelection();
Затем я добавил следующий код (часть mouseInit из ui.core.js, вероятно, должна использовать всю функцию) в ui.resizable.js (около строки 180) после вызова mouseInit для элемента изменяемого размера:
...
//Initialize the mouse interaction
this._mouseInit();
// Add mouse events for the handles as well - ylebre
for (i in this.handles) {
$(this.handles[i]).bind('mousedown.resizable', function(event) {
return self._mouseDown(event);
});
}
Это позволяет мне создать дескриптор изменения размера, который не является дочерним элементом элемента с изменяемым размером. Моя ручка - это div с идентификатором 'south', который прикреплен к элементу изменяемого размера. Вот фрагмент кода HTML:
<textarea id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</textarea>
<div id="south" class="ui-resizable-handle">south</div>
И код JavaScript:
$("#resizable").resizable(
{handles: {s: document.getElementById("south")}}
);
Надеюсь, это поможет!