jQuery Plugin To Generate Resizable DOM Elements - Resizable

jQuery Plugin To Generate Resizable DOM Elements - Resizable
File Size: 42.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 events.

$(".el").resizable({

  // hook into start drag operation (event passed)
  onDragStart: null,

  // hook into stop drag operation (event passed)
  onDragEnd: null,

  // hook into each drag operation (event passed)
  onDrag: null,

});

Change log:

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.