Question

I have a resizable container div. Inside that div there’s another resizable div.
If I destroy the resize handler of the container div, the inner div’s resize handler is destroyed as well. Like this:

$(".container").resizable("destroy");

Is there a way to destroy resize handler of the container but keep the resize handler on the div inside the container?

Answer 1

This does appear to be a bug in the jQuery UI source. The “destroy” call on the parent container is removing the ui-resizable-handle from the target container object and all contained elements.

The root of the problem is in the destroy function in jquery.ui.resizable.js on line 198 (as of JQuery UI v1.8.20).

Notice that it is calling:

.find('.ui-resizable-handle').remove();

This should be changed instead to:

.children('.ui-resizable-handle').remove();

Changing this call will prevent the ui-resizable-handle from being removed from your inner div.

Hope that helps!