JQuery UI Resize Resize in Resize Event

Question

Using jQuery UI Resizable I'm trying to prevent resizing based on various rules. The built-in containment function does not work properly with absolutely positioned elements, and in any case I will need something more flexible.

Something like that:

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

How can I specify an "ui" object to prevent resizing?

Thanks.

Answer 1

In the current version is not possible.

Answer 2

It's very simple, look at this code for resizable floating "left" div columns with width and restrictions for each other.

 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

There is no standard option to stop resizing in this version. You can disable resizing, but it will continue to resize and stop the option to resize only the next time you try.

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

In any case, I found that you can limit the resizing using the maxWidth and maxHeight properties directly from the resize event.

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

Answer 4

Just configure the properties of the user interface properties in the resize event. (You can also do this in case of a stop if you want):

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

You can also do the same with positioning.

See this script: http://jsfiddle.net/dtwist/PrEfd/

Answer 5

I think you could do something like this:

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

Answer 6

The answer you chose correctly is not entirely correct. This is achievable:

Use the useless helper to stop resizing in a resize event:

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

In the resize event, the dimensions and position you want to resize. You still have a problem with the stop event. Before starting the stop event, jquery resizes your element, which you don't want. All you can do is reset the state of the object, as this was the last time a resize event was triggered. Thus, in a stop event, you can reset to resize and position your size as you set them in the last "resize" event that was called. To do this, you will need to declare some variables in a higher context or use the jquery element.data () method - your choice (you can even create an invisible clone of the entire object if it seems more convenient to you). Here is an overview of the final code structure:

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

It's a long time, but there is a solution to this problem if someone reads this.

You just need to set maxWidth or minWidth (depending on what you want to do) inside resize to stop its resizing.

You can do something like the following:

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

Answer 8

There is one inconvenient way: to intercept both start and 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); } } 

Unfortunately, there is a 4-fold “border” in the resize handle, so you need to apply a little correction to avoid changing the “skip” area when you interrupt the resize operation.

This solution returns the save to its original position if the same rule is applied at the same time. You can, of course, adapt this without preserving the original position and size, but recounting it on the fly during resizing. In this case, you do not need to intercept start at all.

Answer 9

If you do not need to continue the mousedown state, you can simply call mouseup:

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

But you may need to continue the mousedown state, for example, the user is dragging a div.

The following is an example of using some of the ideas mentioned.

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