https://github.com/dy/resizable

Resizable behavior for elements
https://github.com/dy/resizable

Last synced: about 1 year ago
JSON representation

Resizable behavior for elements

• Host: GitHub
• URL: https://github.com/dy/resizable
• Owner: dy
• License: mit
• Created: 2014-10-31T21:30:51.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2024-10-18T20:28:15.000Z (over 1 year ago)
• Last Synced: 2025-03-28T19:07:40.305Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://dy.github.io/resizable/test
• Size: 109 KB
• Stars: 73
• Watchers: 6
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: license

Awesome Lists containing this project

README

          
# Resizable

Resizable behaviour for elements. [Demo](https://dy.github.io/resizable).

[![npm install resizable](https://nodei.co/npm/resizable.png?mini=true)](https://nodei.co/npm/resizable/)

```js

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](http://github.com/dfcreative/draggy) 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

🕉