jQuery UI Resizable: Options, Methods and Resize Events

jQuery UI Resizable adds drag handles so users can change an element's width and height. You can constrain dimensions, preserve aspect ratio, resize another element at the same time, or respond to resize events.

Drag an edge or corner

Basic Resizable Top ↑

$( function () {
    $( "#resize_id" ).resizable();
});

Basic Resizable demo →

Resizable Options Top ↑

alsoResize

Resizes one or more additional elements along with the main resizable element.

$( "#my_resizable" ).resizable({
    alsoResize: "#resize_id2"
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "alsoResize" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "alsoResize",
    "#resize_id2"
);

Open demo →

animate

Animates the element to its final dimensions after the drag operation ends.

$( "#my_resizable" ).resizable({
    animate: true
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "animate" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "animate",
    true
);

Open demo →

animateDuration

Sets the duration used when animate is enabled.

$( "#my_resizable" ).resizable({
    animateDuration: "fast"
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "animateDuration" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "animateDuration",
    "fast"
);

Open demo →

animateEasing

Sets the easing function used by the final resize animation.

$( "#my_resizable" ).resizable({
    animateEasing: "easeOutBounce"
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "animateEasing" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "animateEasing",
    "easeOutBounce"
);

Open demo →

aspectRatio

Preserves the original aspect ratio or enforces a numeric ratio.

$( "#my_resizable" ).resizable({
    aspectRatio: true
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "aspectRatio" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "aspectRatio",
    true
);

Open demo →

autoHide

Shows resize handles only while the pointer is over the element.

$( "#my_resizable" ).resizable({
    autoHide: true
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "autoHide" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "autoHide",
    true
);

Open demo →

cancel

Prevents resizing from starting on matching descendants.

$( "#my_resizable" ).resizable({
    cancel: ".no-resize"
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "cancel" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "cancel",
    ".no-resize"
);

Open demo →

classes

Adds custom classes to Resizable structural elements.

$( "#my_resizable" ).resizable({
    classes: { "ui-resizable": "highlight" }
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "classes" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "classes",
    { "ui-resizable": "highlight" }
);

Open demo →

containment

Restricts resizing inside a parent, document, selector or element.

$( "#my_resizable" ).resizable({
    containment: "parent"
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "containment" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "containment",
    "parent"
);

Open demo →

delay

Historically delayed the start of resizing after pointer-down.

Legacy/deprecated option: Deprecated in jQuery UI 1.12. Retained only for older-code reference.

$( "#my_resizable" ).resizable({
    delay: 150
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "delay" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "delay",
    150
);

disabled

Disables resizing when true.

$( "#my_resizable" ).resizable({
    disabled: true
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "disabled" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "disabled",
    true
);

Open demo →

ghost

Displays a translucent helper while resizing.

$( "#my_resizable" ).resizable({
    ghost: true
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "ghost" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "ghost",
    true
);

Open demo →

grid

Snaps resized dimensions to an x/y grid.

$( "#my_resizable" ).resizable({
    grid: [20, 20]
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "grid" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "grid",
    [20, 20]
);

Open demo →

handles

Controls which resize handles are available, such as e, s, se or all.

$( "#my_resizable" ).resizable({
    handles: "e, s, se"
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "handles" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "handles",
    "e, s, se"
);

Open demo →

helper

Applies a CSS class to a temporary helper during resizing.

$( "#my_resizable" ).resizable({
    helper: "ui-state-highlight"
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "helper" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "helper",
    "ui-state-highlight"
);

Open demo →

maxHeight

Sets the maximum allowed height.

$( "#my_resizable" ).resizable({
    maxHeight: 300
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "maxHeight" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "maxHeight",
    300
);

Open demo →

maxWidth

Sets the maximum allowed width.

$( "#my_resizable" ).resizable({
    maxWidth: 400
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "maxWidth" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "maxWidth",
    400
);

Open demo →

minHeight

Sets the minimum allowed height.

$( "#my_resizable" ).resizable({
    minHeight: 80
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "minHeight" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "minHeight",
    80
);

Open demo →

minWidth

Sets the minimum allowed width.

$( "#my_resizable" ).resizable({
    minWidth: 120
});

Read the current option:

const value =
    $( "#my_resizable" ).resizable( "option", "minWidth" );

Set the option after initialization:

$( "#my_resizable" ).resizable(
    "option",
    "minWidth",
    120
);

Open demo →

For additional easing names used with animateEasing, see jQuery UI easing options.

Resizable Methods Top ↑

destroy()

Remove Resizable behavior completely.

$( "#my_resizable" ).resizable( "destroy" );

Open demo →

disable()

Temporarily disable resizing.

$( "#my_resizable" ).resizable( "disable" );

Open demo →

enable()

Re-enable a disabled Resizable.

$( "#my_resizable" ).resizable( "enable" );

Open demo →

instance()

Return the Resizable widget instance.

$( "#my_resizable" ).resizable( "instance" );

option()

Read or set Resizable options.

const options = $( "#my_resizable" ).resizable( "option" );

Return the jQuery object representing the Resizable widget element.

$( "#my_resizable" ).resizable( "widget" );

Resizable Events Top ↑

create

Fires when Resizable is initialized.

$( "#my_resizable" ).resizable({
    create: function ( event, ui ) {
        console.log( "create" );
    }
});

resize

Fires repeatedly while the element is being resized.

$( "#my_resizable" ).resizable({
    resize: function ( event, ui ) {
        console.log( "resize" );
    }
});

Use ui.size and ui.originalSize to inspect dimensions.

start

Fires when resizing begins.

$( "#my_resizable" ).resizable({
    start: function ( event, ui ) {
        console.log( "start" );
    }
});

stop

Fires when resizing ends.

$( "#my_resizable" ).resizable({
    stop: function ( event, ui ) {
        console.log( "stop" );
    }
});

Continue Learning jQuery

jQuery Tutorial Home jQuery Basic Structure Functions Used with jQuery jQuery Events jQuery Effects jQuery UI jQuery Exercises

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

This article is written by plus2net.com team.

plus2net.com

jQuery UI Resizable

Basic Resizable Top ↑

Resizable Options Top ↑

alsoResize

animate

animateDuration

animateEasing

aspectRatio

autoHide

cancel

classes

containment

delay

disabled

ghost

grid

handles

helper

maxHeight

maxWidth

minHeight

minWidth

Resizable Methods Top ↑

destroy()

disable()

enable()

instance()

option()

widget()

Resizable Events Top ↑

create

resize

start

stop

Continue Learning jQuery

Subhendu Mohapatra