jqueryui可調整大小的句柄不隨元素移動，非jqueryui可調整大小調整大小

Question

如果我使用jqueryui調整元素的大小並改變此元素的大小而不使用jqueryui可調整大小，但例如通過jquery.css（'寬度'），那麼jqueryui可調整大小的句柄不隨元素移動。

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'); 
}); 

Example

任何想法如何工作，解決此問題？

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'); 
}); 

DEMO：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/