jQuery双方resize

我会尝试用文字说清楚:我想知道是否有一种方法可以使jquery-ui-resizable同时调整4面上的对象的大小,以便对象的中心保持在同样的立场。

这是沙箱http://jsfiddle.net/V79Ge/

所以,它非常像aspectRatio = true,但是当我从一侧调整对象的大小时,它会控制另外三个边

谢谢你的线索!

这是你所追求的效果: jsFiddle示例

jQuery的:

$('#resizeMe').resizable({ aspectRatio: true, resize: function(event, ui) { $(this).css({ 'top': parseInt(ui.position.top, 10) + ((ui.originalSize.height - ui.size.height)) / 2, 'left': parseInt(ui.position.left, 10) + ((ui.originalSize.width - ui.size.width)) / 2 }); } }); 

编辑:更新代码和jsFiddle以使用ui.position和ui.originalSize。

玩了一下你的沙箱,得到了这个。

http://jsfiddle.net/V79Ge/17/

 $('#resizeMe').resizable({ aspectRatio: true, resize: function(event, ui) { $(this).offset({ top: (ui.originalSize.height-ui.size.height)/2,left:(ui.originalSize.width-ui.size.width)/2}); } }); 

手柄可以满足您的需求吗?

http://jsfiddle.net/V79Ge/1/

然后,您只需将视觉反馈添加到框的两侧。

我做了一些更新j08691的例子。 现在它也适用于西北手柄。

http://jsfiddle.net/j08691/V79Ge/19/

 $('#resizeMe').resizable({ aspectRatio: true, handles: 'all', resize: function(event, ui) { var posTop = parseInt(ui.position.top, 10); var posLeft = parseInt(ui.position.left, 10); var oPosTop = parseInt(ui.originalPosition.top, 10); var pPosLeft = parseInt(ui.originalPosition.left, 10); if(posTop == oPosTop && posLeft == pPosLeft) { $(this).css({ 'top': posTop + ((ui.originalSize.height - ui.size.height)) / 2, 'left': posLeft + ((ui.originalSize.width - ui.size.width)) / 2 }); } else { var width = ui.size.width; var height = ui.size.height; var oWidth = ui.originalSize.width; var oHeight = ui.originalSize.height; $(this).css({ 'width': width + (width - oWidth), 'height': height + (height - oHeight) }); } }}); 

它仍然需要更多的发展。 不使用所有句柄。

  $(".nodecontainer").each(function () { $(this).parent().attr('style', $(this).attr('style')); $(this).spectrum({ showPalette: true, change: function (color) { $(this).parent().css('background-color', color.toHexString()); }, palette: [ ['black', 'white', 'blanchedalmond'], ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow'] ] }) });; $('.nodecontainer').each(function () { $(this).resizable({ alsoResize: $(this).parent(), resize: function (e, ui) { $(this).css("top", 0); $(this).css("left",0); $(this).css("position","relative"); } }); });