jQuery UI可调整大小在resize事件中停止调整大小

Question

使用jQuery UI Resizable，我试图阻止基于各种规则调整大小。内置的容器功能似乎不能很好地处理绝对定位的元素，我需要一些比这更灵活的东西。

拥有这样的东西：

$( ".selector" ).resizable({ resize : function(event, ui) { /* ??? */ } });

我如何告诉"ui“对象阻止调整大小？

谢谢。

Answer 1

在当前版本中似乎是不可能的。

Answer 2

这很简单，看看这段代码，可调整大小的浮动“左”div列，宽度固定和彼此限制。

var maxWidthOffset, total2Width;
        $('#'+this.id).find('ul:not(:last)').resizable({
            handles: 'e',
            ghost: true,
            delay: 200,
            helper: "overmoused",
            minWidth: 20,
            start: function(e, ui) {
                maxWidthOffset = ui.element.next().width()-20;
                total2Width = ui.element.width()+maxWidthOffset+20;
            },
            resize: function(e, ui) {
                if (ui.size.width > (ui.originalSize.width + maxWidthOffset)) {
                    $(this).resizable('widget').trigger('mouseup');
                }
            },
            stop: function(e, ui) {
                var w;
                if (ui.originalSize.width > ui.size.width) {
                    w = ui.element.next().width()+ui.originalSize.width - ui.size.width;
                    ui.element.next().width(w>20 ? w : 20);
                } else {
                    w = ui.element.next().width()-(ui.size.width - ui.originalSize.width);
                    ui.element.next().width(w>20 ? w : 20);
                }
                ui.element.width(total2Width-ui.element.next().width());
            }
        });

Answer 3

在此版本中，没有停止调整大小的标准选项。您可以禁用可调整大小，但它将继续调整大小，并在您下次尝试时停止调整大小的选项。

$(".selector").resizable("disable");

无论如何，我发现您可以直接从Resize事件使用maxWidth和maxHeight属性来限制调整大小。

$(".selector").resizable({
    aspectRatio: true,
    handles: 'all',
    resize: function( event, ui ){
        if(x > y){
            (".selector").resizable("option","maxWidth",ui.size.width);
            return;
        }
    }
});