I was trying to turn the aspect ratios on/off dynamically in JQueryUI resizable, however even after setting the option to false, it keeps maintaining the aspect ratio. Below is the code I am currently working with:

$('#aspect_check').click( function() {
    var ischecked = $('#aspect_check').prop('checked');
    if (ischecked) {
    $( "#resizable" ).resizable( "option", "aspectRatio", .75);
    } else {
        $( "#resizable" ).resizable( "option", "aspectRatio", false );
    }
});

I found a bug report from 3 years ago, which looks like it still hasn't been fixed despite marking it critical. http://bugs.jqueryui.com/ticket/4186

The workarounds don't work with the latest versions. Any ideas?

Edit: After going through a lot of bug reports, here is a work around:

$(function() {
$.extend($.ui.resizable.prototype, (function (orig) {
    return {
        _mouseStart: function (event) {
            this._aspectRatio = !!(this.options.aspectRatio);
            return(orig.call(this, event));
        }
    };
})($.ui.resizable.prototype["_mouseStart"]));
});

Paste it in your javascript script section. Hope it helps someone with similar problem!

jquery jquery-ui jquery-ui-resizable
Edit
Report