在两侧调整jQuery的大小

Question

我会试着用文字表达清楚:我想知道是否有一种方法可以用jquery-ui-resizable同时调整对象四边的大小，使对象的中心保持在相同的位置。

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

因此，它很像aspectRatio=true，但是当我从一侧调整对象的大小时，它将控制另外3个方向

谢谢你的提示！

Answer 1

这就是你想要的效果：。

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。

Answer 2

玩了一下你的沙盒，得到了这个。

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

Answer 3

也许这些把手就是你需要的？

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

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