jQuery UI Resizable stop resizing in the resize event

Just set the UI properties directy within the resize event. (You could also do this on the stop event if you prefer):

$(".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 do the same with positioning too, of course.

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

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

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

Anyway i found that you can limit the resizing using the maxWidth and maxHeight property 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;
        }
    }
});

It's very simple, take a look at this code for resizeable floating 'left' div columns with width fixing and limits 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());
            }
        });

The answered you picked as correct is not entirely correct. This is achievable:

Use a useless helper to stop the resizing occur on the resize event:

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

In the resize event alter the resizable dimensions and position as you desire. You still have a problem with the stop event. Right before the stop event gets triggered, jquery resizes your element - which you don't want. All you can do is to reset the object state as it was the last time the resize event triggered. So, in the stop event you can reset your resizable dimensions and position as they were set by you in the last 'resize' event which triggered. For this you will need to declare some variables in a higher context, or use jquery's element.data() method - your choice (you can even create an invisible clone of the entire object if that seems more comfortable to you). Here's 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
  }
});