In jQuery, how do you destroy resizable() feature after your completely finish resizing?

Question

I have a application when you click on a div it starts a resizable function on the div, but when I click off of it, or click on another div how can i destroy it? I don't think the stop: function(){} will quite do it because it will destroy it after one resize. Any ideas?

I have an example here: http://www.fissiondesigns.com/simon/

You can click on either box on the image and resize it, but after that I want to be able to destroy the resizable feature if you click on another box, kind of like selectable boxes, but only 1 at a time. Thanks!!

Answer 1

Set the disabled property to turn off resizable()

$( ".selector" ).resizable( "option", "disabled", true );

Documentation:

http://docs.jquery.com/UI/Resizable

Answer 2

To remove the resizable feature from an element, use:

$('#my-box').resizable("destroy");

See http://jqueryui.com/demos/resizable/ for the full documentation.

Answer 3

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