jQuery Plugin To Generate Resizable DOM Elements - Resizable

File Size: 32.6 KB
Views Total: 6317
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.