jQuery在两边调整大小

Posted 2023-05-08

【中文标题】jQuery在两边调整大小

【英文标题】：jQuery resize on both sides

【发布时间】：2012-04-11 03:56:31

【问题描述】：

我会尽量用文字说清楚：我想知道是否有一种方法可以使用 jquery-ui-resizable 来同时在 4 个边上调整对象的大小，以便对象的中心保持在同一个位置。

这里是沙盒http://jsfiddle.net/V79Ge/

所以，它很像 aspectRatio=true，但是当我从一侧调整对象的大小时，它会控制另外 3 侧

谢谢你的线索！

【参考方案1】：

这是你想要的效果吗：jsFiddle example。

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。

【讨论】：

拍得也不错！它工作得很好，我想我更喜欢使用 originalSize 属性......但我可以通过测试接受它。谢谢！

当然，可以轻松使用 ui.originalSize 和 ui.position 来代替我定义的变量。代码和 jsFiddle 已更新。

谢谢！由于 div pos 在调整大小时发生了更改，因此仍然存在错误（因此鼠标不会将单击的助手悬停在较大的调整大小上）。谢谢！

【参考方案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);
    
);

【讨论】：

您当前的解决方案看起来很不错！一个大尺寸的小车。如果我能解决它，我会尝试接受它。

@Guile Ya...。我才意识到这一点。我认为另一种解决方案更可靠。不过我看看能不能修好。

【参考方案3】：

手柄可以是你需要的吗？

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

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

【讨论】：

不，他希望调整大小的原点位于元素的中间。这只是将调整大小手柄放在所有四个边上。

他需要调整 div 的大小以使其中心始终相同，因此如果您调整其中一侧的大小，则所有边都应调整大小以使 div 保持在同一中心

是的，这不是我想要的。 j08691 和 Th0rndike 是对的：我的“调整大小原点”应该是 div 的中间，而不是左上角。

这个怎么样？ jsfiddle.net/V79Ge/14 它不完全是盒子的中心，但它可以为你工作。

@Patroklo - 你的最后一个例子看起来和第一个一样。

【参考方案4】：

我对 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)
        );                
    
);

它还需要更多的发展。不适用于所有句柄。

【参考方案5】：

      $(".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");
                
            );
        );