jQuery UI Resizable остановить изменение размера в событии изменения размера

Question

Использование jQuery UI Resizable Я пытаюсь предотвратить изменение размера на основе различных правил.Кажется, что встроенная функция сдерживания не работает должным образом с абсолютно позиционированными элементами, и мне все равно нужно что-то более гибкое, чем это.

Что-то вроде этого:

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

Какя могу сказать объекту "ui", чтобы предотвратить изменение размера?

Спасибо.

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

Answer 2

Нет стандартной опции, чтобы остановить изменение размера в этой версии. Вы можете отключить изменение размера, но оно продолжит изменение размера и остановит возможность изменения размера только при следующей попытке.

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

В любом случае я обнаружил, что вы можете ограничить изменение размера с помощью свойств maxWidth и maxHeight непосредственно из события изменения размера.

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

Answer 3

Просто установите свойства пользовательского интерфейса непосредственно в событии изменения размера.(Вы также можете сделать это на остановке, если хотите):

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

Answer 4

Ответ, который вы выбрали как правильный, не совсем корректен. Это достижимо:

Используйте бесполезный помощник, чтобы остановить изменение размера в событии изменения размера:

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

В событии изменения размера измените размеры и положение изменяемого размера по вашему желанию. У вас все еще есть проблема с событием остановки. Непосредственно перед тем, как срабатывает событие остановки, jquery изменяет размер вашего элемента - чего вы не хотите. Все, что вы можете сделать, это сбросить состояние объекта, как это было в прошлый раз, когда произошло событие изменения размера. Таким образом, в событии stop вы можете сбросить размеры и положение изменяемого размера, как они были установлены вами в последнем событии «resize», которое сработало. Для этого вам нужно объявить некоторые переменные в более высоком контексте или использовать метод element.data () jquery - ваш выбор (вы даже можете создать невидимый клон всего объекта, если вам это кажется более удобным). Вот обзор окончательной структуры кода:

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

Answer 5

Полагаю, вы могли бы сделать что-то подобное:

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

Answer 6

Не представляется возможным в текущей версии.

Answer 7

Если вам не нужно продолжать состояние 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
        });
    }
};

Answer 8

Существует один неловкий способ, перехватывающий 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.

Answer 9

Это было давно, но есть решение этой проблемы, если кто-то прочитает это.

Вам просто нужно установить maxWidth или minWidth (зависит от того, что вы хотите сделать) внутри resize, чтобы остановить его изменение размера.

Вы можете сделать что-то вроде следующего:

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