jquery-ui - jqueryui 可调整大小的句柄不随非 jqueryui-resizable-resize 上的元素移动

Question

如果我使用 jqueryui 使一个元素可调整大小并且我在不使用 jqueryui 可调整大小的情况下更改此元素的大小，但例如通过 jquery.css('width')，则 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');
});

例子

知道如何解决这个问题吗？

Answer 1

通过破坏和重新初始化可调整大小的方法，它可以工作，但这对我来说似乎有点矫枉过正......

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/

Answer 2

当您使用.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/

希望这可以帮助！