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。
玩了一下你的沙箱,得到了这个。
$('#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}); } });
我做了一些更新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"); } }); });