Ecosystems:
JavaScript
Resizable
Resizable behaviour for elements. Demo.
import Resizable from 'resizable';
var resizable = new Resizable(document.querySelector('.my-element'), {
within: 'parent',
handles: 's, se, e',
threshold: 10,
draggable: false
});
resizable.on('resize', function(){
//...
});
Options
| Parameter | Default | Description |
|---|---|---|
handles |
* | List of handles to support. Valid handles: s, se, e, ne, n, nw, w, sw. May be specified as an object, array, or comma-separated string. |
resize |
undefined |
Resize event handler. |
threshold |
10 |
A movement threshold required to start resize - whether array, number or function. |
within |
document |
Restrict movement within the container. Pass 'parent' to take parent node. |
draggable |
false |
Make element draggable as well. Set an object to pass options to draggable. |
css3 |
true |
Use translate3d for defining position. |
* Default handles are dependent on the styling of the given element. Inline
elements will default to s, se, e, while elements that can support full
resize will default to all handles being enabled.
Events
| Name | Description |
|---|---|
resizestart |
Element resize started. |
resize |
Element resized. |
resizeend |
Element resize ended. |
License
MIT
Package Rankings
Top 3.71% on Npmjs.org