jQuery Plugin To Generate Resizable DOM Elements - Resizable

Resizable is a very small and touch-enabled jQuery plugin for creating resizable DOM elements with custom drag/resize handles.

It supports both mouse drag and touch swipe events and is useful for responsive design that helps front-end developers demonstrate how the web components work on different screen sizes / platforms without having to resize the browser window.

How to use it:

1. To get started, you need to load the jQuery resizable plugin after loading jQuery library as follow.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery-resizable.js"></script> 

2. Call the function on target DOM element to make it resizable.

$(".el").resizable();

3. Customize the plugin with the following options.

$(".el").resizable({

  // selector for handle that starts dragging
  handleSelector: null,

  // resize the width
  resizeWidth: true,

  // resize the height
  resizeHeight: true,    

  // the side that the width resizing is relative to
  resizeWidthFrom: 'right',

  // the side that the height resizing is relative to
  resizeHeightFrom: 'bottom',     

  // disable touch-action on $handle
  // prevents browser level actions like forward back gestures
  touchActionNone: true,

  // instance id
  instanceId: null

});

4. Callback functions.

$(".el").resizable({

  onDragStart: function (e, $el, opt) {
    $el.css("cursor", "nwse-resize");
  },
  
  onDragEnd: function (e, $el, opt) {
    $el.css("cursor", "");
  }

  onDrag: function (e, $el, newWidth, newHeight, opt) {
    // limit box size
    if (newWidth > 300)
      newWidth = 300;
    if (newHeight > 200)
      newHeight = 200;        

    $el.width(newWidth);
    $el.height(newHeight);

    // explicitly return **false** if you don't want 
    // auto-height computation to occur
    return false;
  });

});

5. It also provides a method to resize table columns via drag and drop:

<script src="src/jquery-resizableTableColumns.min.js"></script> 

$("td,th").resizableTableColumns();

.resizer {
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  left: auto;
  width: 16px;    
  cursor: col-resize;       
}

Changelog:

2019-11-19

• v0.35: At Watch scripts using LiveReload Server (dotnetcore sdk required); Add .resizableSafe() to allow side by side operation with jquery UI or other framework. Update jquery dependency to ^3.4.0 to avoid security nag.

2018-05-03

• v0.32: Fix resizing for content that contains iFrame by removing pointer events on iFrame on drag and restoring and ondragcomplete.

2018-01-28

• v0.27: Fix - remove console.log from dev code.

2018-01-09

• v0.25: Update code for jQuery 3.x

2016-04-01

• v0.17: Allow a child selector for the handle

2016-03-13

• v0.15

2016-01-04

• Add jquery-resizableTableColumns plug-in

2015-12-23

• Add touch-action override on body to facilitate dragging in Internet Explorer with touch.

---

This awesome jQuery plugin is developed by RickStrahl. For more Advanced Usages, please check the demo page or visit the official website.