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

Question

使用jQuery UI Resizable，我试图根据各种规则阻止调整大小。内置的限制功能似乎无法与绝对定位的元素正常工作，并且我需要比那更灵活的东西。

有这样一个例子：

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

我怎样告诉“ui”对象防止调整大小？

谢谢。

- pbz

---

你能解决这个问题吗？ - Adi

我也曾经在DOM方面遇到了麻烦，直到我将包含元素设置为相对定位。 - Dead.Rabit

Answer 1

非常简单，看看这个代码实现可以调整大小的悬浮在左侧的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());
            }
        });

- Alexey

---

是的，mouseup很好用。我不明白为什么jQueryUI团队不将这样有用的功能添加到API中。每当使用jQueryUI时，我总是需要进行一些修改。 - jsonx

鼠标松开事件可以正常工作，但如果用户在按下鼠标时尝试执行其他操作（例如拖动div），则该事件将无用。 - Will

Answer 2

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

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

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

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

- Roy Shoa

---

这是基于各种规则停止调整大小的最正确的答案。虽然我会在调整大小事件内使用$(this)，而不是$('.selector')。 - akDeveloper

绝对是正确的方法，而且比Alexey的答案更简单/清晰。 - MJB

Answer 3

在调整大小事件中直接设置UI属性即可（如果您喜欢，也可以在停止事件中执行此操作）：

$(".selector").resizable({
    resize: function(event, ui) {
        // set directly
        ui.size.height = 150;
        ui.size.width = 150;
    }
});

$(".selector2").resizable({
    resize: function(event, ui) {
        // return value from another function
        restrictSize(ui);
    }
});

function restrictSize(ui) {
    maxheight = 250;
    maxwidth = 300;

    ui.size.height = ui.size.height > maxheight ? maxheight : ui.size.height;
    ui.size.width = ui.size.width > maxwidth ? maxwidth : ui.size.width;
}

当然，对于定位来说，你也可以做出同样的效果。

请参考这个示例：http://jsfiddle.net/dtwist/PrEfd/

- David Twist

---

你的回答正是我想知道的：“如何在调整大小期间设置大小？”。谢谢，省去了我一些麻烦。 - David

Answer 4

我猜你可以这样做：

$(Selector).css("min-hight", Size);
$(Selector).css("max-hight", Size);

- Alaeddin Hussein

Answer 5

很久以前，但如果有人读到这个问题，现在已经有解决方案了。

你只需要在resize中设置maxWidth或minWidth（取决于你想要做什么），就可以停止它的调整大小。

你可以像下面这样做：

minWidth: 300,
start: function(event, ui) {
    // get it once so we don't get it hundreds of time inside resize
    this.enforcedMinWidth = $(this).resizable("option", "minWidth");
},
resize: function(event, ui) {
    // use whatever conditions you want to stop here
    // in my original case, i was checking its width vs neighbor and
    // stops the resizing accordingly, so change it to fit your case
    if (ui.element.next().width() <= this.enforcedMinWidth) {
        $(this).resizable("option", "maxWidth", ui.size.width); 
    }
},
stop: function(event, ui) {
    // reset
    $(this).resizable("option", "maxWidth", null);
    // cleanup
    delete this.enforcedMinWidth;
}

- codenamezero

Answer 6

你选择的正确答案并不完全正确。以下是可行方案：

使用一个无用的辅助函数，在调整大小事件上停止调整大小的发生：

$( ".selector" ).resizable({
  resize: function(event, ui) { 
    // resize $(this) as you wish
  },
  helper: $("</div>")
});

在调整大小事件中，根据您的要求更改可调整大小的尺寸和位置。您仍然有一个停止事件的问题。就在停止事件被触发之前，jQuery会调整您的元素大小 - 这是您不想要的。您能做的只是将对象状态重置为上次触发“resize”事件时的状态。因此，在停止事件中，您可以将可调整大小的尺寸和位置重置为上次触发的“resize”事件中设置的值。为此，您需要在较高的上下文中声明一些变量，或使用jQuery的element.data()方法 - 由您选择（如果这对您来说更舒适，甚至可以创建整个对象的不可见克隆）。以下是最终代码结构的概述：

$( ".selector" ).resizable({
  resize: function(event, ui) { 
    // resize $(this) as you wish and then save the dimensions and positions to some variables declared in a higher context
  },
  helper: $("</div>"),
  stop: function(){
    // restore $(this) position and location as it was last set in the resize event
  }
});

- Radu Simionescu

Answer 7

有一种尴尬的方法是拦截 start 和 resize 两者：

resize: function(event, ui) {
    if (RULE) {
        $(this).resizable('widget').trigger('mouseup');
        var save = window.savePosition;
        save.width  += 4;
        save.height += 4;
        $(ui.helper).css(save);
        return;
    }
},
start: function(event, ui) {
    if (RULE) {
        window.savePosition = $.extend({ }, ui.size, ui.position);
    }
}

不幸的是，调整大小手柄上有一个4像素的“边框”，因此您必须进行轻微的修正，以避免在中止调整大小操作时可调整大小区域“跳过”。

该解决方案将保存还原到初始位置，假定相同的规则始终适用。当然，您可以通过不保存初始位置和大小，而是在调整大小期间动态重新计算它来进行调整。在这种情况下，您根本不需要拦截start。

- LSerni

Answer 8

目前版本似乎不可能实现。

- pbz

Answer 9

如果您不需要继续mousedown状态，您可以直接触发mouseup：

var resizableSettings = {
    start: function(event, element) {
        if (a > b) {
            $(this).trigger('mouseup');
        }
    }
};

但你可能需要继续mousedown状态，比如用户拖动一个div。

下面是一个示例，使用了之前提到的一些想法。

var resizableSettings = {
    start: function(event, element) {
        if (a > b) {
            $(this).resizable('option', {
                'maxWidth': element.size.width,
                'minWidth': element.size.width,
                'maxHeight': element.size.height,
                'minHeight': element.size.height
            });
            return;
        }
        $(this).resizable('option', {
            'maxWidth': false,
            'minWidth': false,
            'maxHeight': false,
            'minHeight': false
        });
    }
};

- Will