Change Specific Element Resize Options in jQuery Resize

Question

I am using the jQueryUI resizable widget, and have a bunch of resizable boxes on a page. When the document loads, I initialize the widget, like so:

$('.ui-draggable').resizable({
    minHeight: 10, // 10 is actually the default
    minWidth: 10, // 10 is actually the default
    resize: function() {
        showProperties(this);
    },
});

However, at some point I want only some of those elements to change resize options. What I'm trying to do is this:

if (type == 'sometype')
{
    console.log($('#'+elementID).resizable('option', 'handles'));
    $('#'+elementID).resizable('option', 'handles', 'e,w');
    console.log($('#'+elementID).resizable('option', 'handles'));
}

This indeed outputs:

e,s,se
e,w

in the console, so the event is triggered and the selector is correct, but the code doesn't actually work: in fact, the handles remain the same, namely e, s, se.

Is this because I'm using a different selector from the original init? If so, how can I change the resize options only on a subset of originally-resizable elements? And if not, what could be the problem?

Answer 1

Handles are actually divs added to the element on which resizable is applied. It seems that changing the option doesn't refresh these handles. Maybe there's a way to apply the changes on specific subset and refresh, but I'm not sure how. But one quick workaround would be to hide the handles you don't want instead of changing the handle option. You would have to set handle option to all the handles you'll need, and then hide those not wanted. Like this to remove se handle for example:

$('#'+elementID).find('.ui-resizable-se').hide();