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

Example

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

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

DEMO：http://jsfiddle.net/Mghhf/5/

希望这有帮助！

jqueryui resizable句柄不会与非jqueryui-resizable-resize上的元素一起移动

2 个答案: