jQuery UI API - Resizable Widget
Category
Usage
Description: Resize elements using the mouse.
Version Added: 1.0
Dependencies:
Note: The jQuery UI Resizable plugin makes the selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as minimum and maximum width and height.
Additional Notes: This widget requires some functional CSS, otherwise it will not work. If you are creating a custom theme, use the widget's specific CSS file as a starting point.
Quick Navigation
| Options | Methods | Events |
|---|---|---|
| alsoResize animate animateDuration animateEasing aspectRatio autoHide cancel containment delay disabled distance ghost grid handles helper maxHeight maxWidth minHeight minWidth | destroy disable enable option widget | create resize start stop |
| Option | Type | Description | Default Value |
|---|---|---|---|
| alsoResize | Selector or jQuery or Element | One or more elements to resize synchronously with the resizable element. <br> Code example: Initialize resizable with the specified alsoResize option: $( ".selector" ).resizable({ alsoResize: "#mirror" }); After initialization, get or set the alsoResize option: // getter<br>var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); | false |
| animate | Boolean | Animate to the final size after resizing. <br> Code example: Initialize resizable with the specified animate option: $( ".selector" ).resizable({ animate: true }); After initialization, get or set the animate option: // getter<br>var animate = $( ".selector" ).resizable( "option", "animate" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "animate", true ); | false |
| animateDuration | Number or String | Duration of the animation when using the animate option. <br> Supports multiple types: Number: Duration in milliseconds.<br> String: A named duration, such as "slow" or "fast". Code example: Initialize resizable with the specified animateDuration option: $( ".selector" ).resizable({ animateDuration: "fast" }); After initialization, get or set the animateDuration option: // getter<br>var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "animateDuration", "fast" ); | "slow" |
| animateEasing | String | The Easings to use when using the animate option. <br> Code example: Initialize resizable with specified animateEasing option: $( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); After initialization, get or set the animateEasing option: // getter<br>var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" ); | "swing" |
| aspectRatio | Boolean or Number | Whether the element should be constrained to a specific aspect ratio. <br> Supports multiple types: Boolean: When set to true, the element will maintain its original aspect ratio. <br> Number: Forces the element to maintain a specific aspect ratio when resizing. Code example: Initialize resizable with specified aspectRatio option: $( ".selector" ).resizable({ aspectRatio: true }); After initialization, get or set the aspectRatio option: // getter<br>var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "aspectRatio", true ); | false |
| autoHide | Boolean | Whether to hide the handles when the user's mouse is not over the element. <br> Code example: Initialize resizable with specified autoHide option: $( ".selector" ).resizable({ autoHide: true }); After initialization, get or set the autoHide option: // getter<br>var autoHide = $( ".selector" ).resizable( "option", "autoHide" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "autoHide", true ); | false |
| cancel | Selector | Prevents resizing from starting on specified elements. <br> Code example: Initialize resizable with specified cancel option: $( ".selector" ).resizable({ cancel: ".cancel" }); After initialization, get or set the cancel option: // getter<br>var cancel = $( ".selector" ).resizable( "option", "cancel" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "cancel", ".cancel" ); | "input, textarea, button, select, option" |
| containment | Selector or Element or String | Adjusts the size within the bounds of the specified element or region. <br> Supports multiple types: Selector: The resizable element will be contained within the bounds of the first element of the selector. If no element is found, containment is not set. <br> Element: The resizable element will be contained within the bounds of the element. <br> String: Possible values: "parent", "document". Code example: Initialize resizable with specified containment option: $( ".selector" ).resizable({ containment: "parent" }); After initialization, get or set the containment option: // getter<br>var containment = $( ".selector" ).resizable( "option", "containment" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "containment", "parent" ); | false |
| delay | Number | The time in milliseconds from when the mouse is pressed until resizing starts. If specified, resizing only begins after the mouse has moved beyond the specified time. This option prevents unnecessary resizing when clicking on an element. <br> Code example: Initialize resizable with specified delay option: $( ".selector" ).resizable({ delay: 150 }); After initialization, get or set the delay option: // getter<br>var delay = $( ".selector" ).resizable( "option", "delay" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "delay", 150 ); | 0 |
| disabled | Boolean | If set to true, disables the resizable. <br> Code example: Initialize resizable with specified disabled option: $( ".selector" ).resizable({ disabled: true }); After initialization, get or set the disabled option: // getter<br>var disabled = $( ".selector" ).resizable( "option", "disabled" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "disabled", true ); | false |
| distance | Number | The distance in pixels the mouse must move before resizing starts after it is pressed. If specified, resizing only begins after the mouse has moved beyond the specified distance. This option prevents unnecessary resizing when clicking on an element. <br> Code example: Initialize resizable with specified distance option: $( ".selector" ).resizable({ distance: 30 }); After initialization, get or set the distance option: // getter<br>var distance = $( ".selector" ).resizable( "option", "distance" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "distance", 30 ); | 1 |
| ghost | Boolean | If set to true, displays a semi-transparent helper element for resizing. <br> Code example: Initialize resizable with specified ghost option: $( ".selector" ).resizable({ ghost: true }); After initialization, get or set the ghost option: // getter<br>var ghost = $( ".selector" ).resizable( "option", "ghost" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "ghost", true ); | false |
Align resizable elements to a grid, with each element aligned to specific x and y pixels. The array format must be [x, y].
Code example: Initialize resizable with a specified grid option:
$(".selector").resizable({ grid: [20, 10] });
After initialization, get or set the grid option:
// getter
var grid = $(".selector").resizable("option", "grid");
// setter
$(".selector").resizable("option", "grid", [20, 10]);
Handles for resizing.
Supports multiple types:
- String: A comma-separated list of any of the following values: n, e, s, w, ne, se, sw, nw, all. Necessary handles are automatically generated by the plugin.
- Object: Supports the following keys: { n, e, s, w, ne, se, sw, nw }. Any specified value should be a jQuery selector matching the child element used as the handle. Note: When creating your own handles, each handle must have the class ui-resizable-handle, or the appropriate ui-resizable-{direction} class, such as ui-resizable-s.
Code example: Initialize resizable with a specified handles option:
$(".selector").resizable({ handles: "n, e, s, w" });
After initialization, get or set the handles option:
// getter
var handles = $(".selector").resizable("option", "handles");
// setter
$(".selector").resizable("option", "handles", "n, e, s, w");
A class name that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is resized.
Code example: Initialize resizable with a specified helper option:
$(".selector").resizable({ helper: "resizable-helper" });
After initialization, get or set the helper option:
// getter
var helper = $(".selector").resizable("option", "helper");
// setter
$(".selector").resizable("option", "helper", "resizable-helper");
The maximum height to which the resizable can be resized.
Code example: Initialize resizable with a specified maxHeight option:
$(".selector").resizable({ maxHeight: 300 });
After initialization, get or set the maxHeight option:
// getter
var maxHeight = $(".selector").resizable("option", "maxHeight");
// setter
$(".selector").resizable("option", "maxHeight", 300);
| maxWidth | Number | The maximum width to which the resizable can be resized. <br> Code example: Initialize a resizable with the specified maxWidth option: $( ".selector" ).resizable({ maxWidth: 300 }); After initialization, get or set the maxWidth option: // getter<br>var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "maxWidth", 300 ); | null | | minHeight | Number | The minimum height to which the resizable can be resized. <br> Code example: Initialize a resizable with the specified minHeight option: $( ".selector" ).resizable({ minHeight: 150 }); After initialization, get or set the minHeight option: // getter<br>var minHeight = $( ".selector" ).resizable( "option", "minHeight" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "minHeight", 150 ); | 10 | | minWidth | Number | The minimum width to which the resizable can be resized. <br> Code example: Initialize a resizable with the specified minWidth option: $( ".selector" ).resizable({ minWidth: 150 }); After initialization, get or set the minWidth option: // getter<br>var minWidth = $( ".selector" ).resizable( "option", "minWidth" );<br> <br>// setter<br>$( ".selector" ).resizable( "option", "minWidth", 150 ); | 10 |
| Method | Returns | Description |
|---|---|---|
| destroy() | jQuery (plugin only) | Completely removes the resizable functionality. This will return the element to its pre-init state. <br> This method does not accept any parameters. Code example: Call the destroy method: $( ".selector" ).resizable( "destroy" ); |
| disable() | jQuery (plugin only) | Disables the resizable. <br> This method does not accept any parameters. Code example: Call the disable method: $( ".selector" ).resizable( "disable" ); |
| enable() | jQuery (plugin only) | Enables the resizable. <br> This method does not accept any parameters. Code example: Call the enable method: $( ".selector" ).resizable( "enable" ); |
| option( optionName ) | Object | Gets the value currently associated with the specified optionName. <br> optionName<br> Type: String<br> Description: The name of the option to get. Code example: Call the method: var isDisabled = $( ".selector" ).resizable( "option", "disabled" ); |
| option() | PlainObject | Gets an object containing key/value pairs representing the current resizable options hash. <br> This method does not accept any parameters. Code example: Call the method: var options = $( ".selector" ).resizable( "option" ); |
| option( optionName, value ) | jQuery (plugin only) | Sets the value of the resizable option associated with the specified optionName. <br> optionName<br> Type: String<br> Description: The name of the option to set. <br> value<br> Type: Object<br> Description: The value to set for the option. Code example: Call this method: $( ".selector" ).resizable( "option", "disabled", true ); |
| option( options ) | jQuery (plugin only) | Sets one or more options for the resizable. <br> options<br> Type: Object<br> Description: A map of option-value pairs to set. Code example: Call this method: $( ".selector" ).resizable( "option", { disabled: true } ); |
| widget() | jQuery | Returns a jQuery object containing the resizable element. <br> This method does not accept any parameters. Code example: Call the widget method: var widget = $( ".selector" ).resizable( "widget" ); |
| Event | Type | Description |
|---|---|---|
| create( event, ui ) | resizecreate | Triggered when the resizable is created. <br> event<br> Type: Event<br> ui<br> Type: Object Note: The ui object is empty, included here for consistency with other events. Code example: Initialize resizable with the specified create callback: $( ".selector" ).resizable({<br> create: function( event, ui ) {}<br>}); Bind an event listener to the resizecreate event: $( ".selector" ).on( "resizecreate", function( event, ui ) {} ); |
| resize( event, ui ) | resize | Triggered during the resize, on the drag of the resize handler. <br> event<br> Type: Event<br> ui<br> Type: Object<br> element<br> Type: jQuery<br> Description: The jQuery object representing the element to be resized. <br> helper<br> Type: jQuery<br> Description: The jQuery object representing the helper being resized. <br> originalElement<br> Type: jQuery<br> Description: The jQuery object representing the original element before it was wrapped. <br> originalPosition<br> Type: Object<br> Description: The position of the resizable before the resizing, represented as { top, left }. <br> originalSize<br> Type: Object<br> Description: The size of the resizable before the resizing, represented as { width, height }. <br> position<br> Type: Object<br> Description: The current position, represented as { top, left }. <br> size<br> Type: Object<br> Description: The current size, represented as { width, height }. Code example: Initialize resizable with the specified resize callback: $( ".selector" ).resizable({<br> resize: function( event, ui ) {}<br>}); Bind an event listener to the resize event: $( ".selector" ).on( "resize", function( event, ui ) {} ); |
| start( event, ui ) | resizestart | Triggered when the resize operation starts. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> element<br> Type: jQuery<br> Description: jQuery object representing the element to be resized. <br> <br> helper<br> Type: jQuery<br> Description: jQuery object representing the helper being resized. <br> <br> originalElement<br> Type: jQuery<br> Description: jQuery object representing the original element before being wrapped. <br> <br> originalPosition<br> Type: Object<br> Description: Position before resizing, represented as { top, left }. <br> <br> originalSize<br> Type: Object<br> Description: Size before resizing, represented as { width, height }. <br> <br> position<br> Type: Object<br> Description: Current position, represented as { top, left }. <br> <br> size<br> Type: Object<br> Description: Current size, represented as { width, height }. Code example: Initialize resizable with specified start callback: $( ".selector" ).resizable({<br> start: function( event, ui ) {}<br>}); Bind an event listener to the resizestart event: $( ".selector" ).on( "resizestart", function( event, ui ) {} ); |
| stop( event, ui ) | resizestop | Triggered when the resize operation stops. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> element<br> Type: jQuery<br> Description: jQuery object representing the element to be resized. <br> <br> helper<br> Type: jQuery<br> Description: jQuery object representing the helper being resized. <br> <br> originalElement<br> Type: jQuery<br> Description: jQuery object representing the original element before being wrapped. <br> <br> originalPosition<br> Type: Object<br> Description: Position before resizing, represented as { top, left }. <br> <br> originalSize<br> Type: Object<br> Description: Size before resizing, represented as { width, height }. <br> <br> position<br> Type: Object<br> Description: Current position, represented as { top, left }. <br> <br> size<br> Type: Object<br> Description: Current size, represented as { width, height }. Code example: Initialize resizable with specified stop callback: $( ".selector" ).resizable({<br> stop: function( event, ui ) {}<br>}); Bind an event listener to the resizestop event: $( ".selector" ).on( "resizestop", function( event, ui ) {} ); |
Example
A simple jQuery UI Resizable Widget.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resizable Widget Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
#resizable {
width: 100px;
height: 100px;
background: #ccc;
} </style>
```html
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="resizable"></div>
<script>
$( "#resizable" ).resizable();
</script>
</body>
</html>