ResizeHelper
Handles resizing of elements using handles. Handles can be actual elements or virtual handles specified as a border area on elements left and right edges.
// enable resizing all elements with class 'resizable'
let resizer = new ResizeHelper({
targetSelector: '.resizable'
});
Configs
27
Configs
27Common
Other
Assign a function to determine if a hovered element can be resized or not.
Return true to allow resizing or false to prevent.
| Parameter | Type | Description |
|---|---|---|
element | HTMLElement |
Use bottom handle when resizing. Only applies when direction is 'vertical'
Direction to resize in, either 'horizontal' or 'vertical'
The amount of pixels to move mouse before it counts as a drag operation
Outer element that limits where element can be dragged
Automatically shrink virtual handles when available space < handleSize. The virtual handles will decrease towards width/height 1, reserving space between opposite handles to for example leave room for dragging. To configure reserved space, see reservedSpace.
A CSS selector used to determine which inner element contains handles.
A CSS selector used to determine where handles should be "displayed" when resizing. Defaults to targetSelector if unspecified
Resizing handle size
CSS class added when the resize state is invalid
A function that determines if dragging an element is allowed. Gets called with the element as argument,
return true to allow dragging or false to prevent.
| Parameter | Type | Description |
|---|---|---|
element | HTMLElement |
Use left handle when resizing. Only applies when direction is 'horizontal'
Max height when resizing
Max width when resizing.
Minimum height when resizing
Minimum width when resizing
Room in px to leave unoccupied by handles when shrinking them dynamically (see dynamicHandleSize).
CSS class added when resizing
Use right handle when resizing. Only applies when direction is 'horizontal'
Optional scroller used to read scroll position. If unspecified, the outer element will be used.
A CSS selector used to determine if resizing an element is allowed.
Use top handle when resizing. Only applies when direction is 'vertical'
Resizing handle size on touch devices
Properties
3
Properties
3Functions
11
Functions
11Abort dragging
Events
7
Events
7Fires when a resize is canceled (width & height are reverted)
// Adding a listener using the "on" method
resizeHelper.on('cancel', ({ source, context, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Resize context |
event | MouseEvent | TouchEvent | Browser event |
Fires after resize, and allows for asynchronous finalization by setting 'async' to true on the context object.
// Adding a listener using the "on" method
resizeHelper.on('resize', ({ source, context }) => {
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Context about the resize operation. Set 'async' to |
Fired when dragging starts.
// Adding a listener using the "on" method
resizeHelper.on('resizeStart', ({ source, context, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Resize context |
event | MouseEvent | TouchEvent | Browser event |
Fired while dragging
// Adding a listener using the "on" method
resizeHelper.on('resizing', ({ source, context, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Resize context |
event | MouseEvent | Browser event |
Event handlers
7
Event handlers
7Called when a resize is canceled (width & height are reverted)
new ResizeHelper({
onCancel({ source, context, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Resize context |
event | MouseEvent | TouchEvent | Browser event |
Called after resize, and allows for asynchronous finalization by setting 'async' to true on the context object.
new ResizeHelper({
onResize({ source, context }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Context about the resize operation. Set 'async' to |
Called when dragging starts.
new ResizeHelper({
onResizeStart({ source, context, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Resize context |
event | MouseEvent | TouchEvent | Browser event |
Called while dragging
new ResizeHelper({
onResizing({ source, context, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | ResizeHelper | |
context | ResizeContext | Resize context |
event | MouseEvent | Browser event |
Typedefs
2
Typedefs
2Contextual information available during a resize.
| Parameter | Type | Description |
|---|---|---|
element | HTMLElement | Element being resized |
edge | top | right | bottom | left | Edge being dragged |
valid | Boolean |
|
async | Boolean | Set to |
finalize | function | Call this function to finalize the resize, required if it was flagged as |
newWidth | Number | New width of the element |
newHeight | Number | New height of the element |
newX | Number | New x coordinate of the element, when dragging left edge |
newY | Number | New y coordinate of the element, when dragging top edge |