Дескриптор изменяемого размера jqueryui не перемещается с элементом, не относящимся к jqueryui-resizable-resize

Question

Если я сделаю элемент изменяемого размера с помощью jqueryui, и я изменю размер этого элемента, не используя jqueryui resizable, но, например, с помощью jquery.css('width'), то дескриптор jqueryui resizable не перемещается вместе с элементом.

HTML:

<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png"/>
<input id="resizeImage" type="button" value="Resize Image" />

Автор сценария:

var image = $('#image');
image.resizable();
$('#resizeImage').on('mouseup', function () {
  image.css('width', parseInt(image.width() - 1, 10) + 'px');
});

пример

Есть идеи, как обойти это?

Answer 1

Когда вы используете .resizable(), это оборачивает этот элемент в <div class="ui-wrapper"></div>, Я предлагаю сделать следующее:

var image = $('#image');
image.resizable();
$('#resizeImage').on('mouseup', function () {
     image.css('width', parseInt(image.width() - 1, 10) + 'px');
     $('.ui-wrapper').css('width', parseInt(image.width() - 1, 10) + 'px');
});

ДЕМО: http://jsfiddle.net/Mghhf/5/

Надеюсь это поможет!

Answer 2

Уничтожая и переинициализируя изменяемый размер, он работает, но это кажется мне излишним...

var image = $('#image');
image.resizable();
$('#resizeImage').on('mouseup', function () {
image.resizable('destroy')
  .css('width', parseInt(image.width() - 1, 10) + 'px')
  .resizable();
});

http://jsfiddle.net/Mghhf/3/