jQuery UI Resizable

jQuery UI's resizable() interaction turns any element into a box the user can drag-resize from its edges or corners. It's built on top of jQuery, adding ready-made handles, ratio locking, size limits, and resize events so you don't have to build the drag math yourself.

Quick Reference

Option / Event Description Example
.resizable()Turns the element into a resizable box with a default corner handle.$('#box').resizable();
handlesWhich edges/corners show handles: n, e, s, w, ne, se, sw, nw.handles: 'n, e, s, w, ne, se, sw, nw'
aspectRatioLock width/height proportions while resizing (useful for images).aspectRatio: true
minWidth / minHeightSmallest size the box can shrink to.minWidth: 100, minHeight: 80
maxWidth / maxHeightLargest size the box can grow to.maxWidth: 400, maxHeight: 300
startFires once when a resize drag begins.start: function(e, ui){ ... }
resizeFires continuously while dragging.resize: function(e, ui){ ... }
stopFires once when the resize drag ends.stop: function(e, ui){ ... }
Tip: Load the jQuery UI CSS theme (jquery-ui.css) so resize handles are visible; without it the handles still work but render invisibly at the edges.

1) Basic Resizable


$('#box').resizable();
Try it Yourself »

2) handles Option


$('#box').resizable({
  handles: 'n, e, s, w, ne, se, sw, nw'
});
Try it Yourself »

3) aspectRatio (Lock Proportions)


// great for resizing images without distortion
$('#img').resizable({
  aspectRatio: true
});
Try it Yourself »

4) Min / Max Dimensions


$('#box').resizable({
  minWidth: 100,
  minHeight: 80,
  maxWidth: 400,
  maxHeight: 300
});
Try it Yourself »

5) Events: start, resize, stop


$('#box').resizable({
  start: function(e, ui){ // drag begins },
  resize: function(e, ui){ // while dragging, ui.size.width/height },
  stop: function(e, ui){ // drag ends }
});
Try it Yourself »

Live Demo

Drag the bottom-right (and other) handles of the box below to resize it live. Size and last event are shown underneath.

Resize me

Drag my edges or corners.

Try resizing the box above.
Note: Combine resizable() with draggable() on the same element to build movable, resizable panels/widgets (e.g. a dashboard card).