Resizable

Moveable. Resizable

Source:
Resizable indicates whether the target's width and height can be increased or decreased.

Members

keepRatio

Source:
When resize or scale, keeps a ratio of the width, height. (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  resizable: true,
});

moveable.keepRatio = true;

renderDirections

Source:
Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  resizable: true,
  renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
});

moveable.renderDirections = ["nw", "ne", "sw", "se"];

resizable

Source:
Whether or not target can be resized. (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    resizable: false,
});

moveable.resizable = true;

throttleResize

Source:
throttle of width, height when resize.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  resizable: true,
  throttleResize: 0,
});

moveable.throttleResize = 1;

Methods

request(eopt, e.directionopt, e.deltaWidthopt, e.deltaHeightopt, e.offsetWidthopt, e.offsetHeightopt, e.isInstantopt) → {Moveable.Requester}

Source:
Name Type Description
e? object the Resizable's request parameter
Properties
Name Type Default Description
direction? number [1, 1] Direction to resize
deltaWidth? number delta number of width
deltaHeight? number delta number of height
offsetWidth? number offset number of width
offsetHeight? number offset number of height
isInstant? number Whether to execute the request instantly
Example
// Instantly Request (requestStart - request - requestEnd)
// Use Relative Value
moveable.request("resizable", { deltaWidth: 10, deltaHeight: 10 }, true);

// Use Absolute Value
moveable.request("resizable", { offsetWidth: 100, offsetHeight: 100 }, true);

// requestStart
const requester = moveable.request("resizable");

// request
// Use Relative Value
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });

// Use Absolute Value
moveable.request("resizable", { offsetWidth: 100, offsetHeight: 100 });
moveable.request("resizable", { offsetWidth: 110, offsetHeight: 100 });
moveable.request("resizable", { offsetWidth: 120, offsetHeight: 100 });

// requestEnd
requester.requestEnd();
Returns:
Moveable Requester
Type
Moveable.Requester

Type Definitions

OnResize

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
direction number[] The direction of resize.
width number a target's cssWidth
height number a target's cssHeight
offsetWidth number a target's offsetWidth
offsetHeight number a target's offsetHeight
dist number[] The distance of [width, height]
delta number[] The delta of [width, height]
isPinch boolean Whether or not it is being pinched.
drag OnDrag resize causes a `drag` event.
Type:
  • TSInterface

OnResizeEnd

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
lastEvent any | undefined This is the last dragged event. No, if you haven't dragged.
isDrag boolean Whether this moved
isDouble boolean Whether it is double-click
Type:
  • TSInterface

OnResizeGroup

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> The resizing targets
events Array<OnResize & {drag: OnDrag}> Each `resize` & `drag `event on the targets
Type:
  • TSInterface

OnResizeGroupEnd

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> The resize finished targets
Type:
  • TSInterface

OnResizeGroupStart

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> targets to resize
events OnResizeStart[] Each `resizeStart` event on the targets
Type:
  • TSInterface

OnResizeStart

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
direction number[] The direction of resize.
dragStart OnDragStart | false resize causes a `dragStart` event.
set (size: number[]) => any You can set the css width, height value.
setMin (minSize: number[]) => any You can set the css min width, min height value. (default: min-width)
setMax (maxSize: number[]) => any You can set the css max width, max height value. (default: max-width)
setOrigin (origin: Array<string | number>) => any You can set the css origin (default: % %)
setFixedDirection (startDirecition: number[]) => any Set a fixed direction to resize. (default: Opposite direction)
setRatio (ratio: number) => any Set the ratio of width and height. (default: offsetWidth / offsetHeight)
Type:
  • TSInterface

ResizableOptions

Source:
Properties:
Name Type Description
renderDirections? boolean | string[] Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
resizable? boolean Whether or not target can be resized. (default: false)
throttleResize? number throttle of width, height when resize. (default: 0)
keepRatio? boolean When resize or scale, keeps a ratio of the width, height. (default: false)
Type:
  • TSInterface

Events

resize

Source:
When resizing, the resize event is called.
Type Description
Moveable.Resizable.OnResize Parameters for the resize event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { resizable: true });
moveable.on("resize", ({ target, width, height }) => {
    target.style.width = `${e.width}px`;
    target.style.height = `${e.height}px`;
});

resizeEnd

Source:
When the resize finishes, the resizeEnd event is called.
Type Description
Moveable.Resizable.OnResizeEnd Parameters for the resizeEnd event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { resizable: true });
moveable.on("resizeEnd", ({ target, isDrag }) => {
    console.log(target, isDrag);
});

resizeGroup

Source:
When the group resize, the `resizeGroup` event is called.
Type Description
Moveable.Resizable.onResizeGroup Parameters for the `resizeGroup` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    resizable: true
});
moveable.on("resizeGroup", ({ targets, events }) => {
    console.log("onResizeGroup", targets);
    events.forEach(ev => {
        const offset = [
            direction[0] < 0 ? -ev.delta[0] : 0,
            direction[1] < 0 ? -ev.delta[1] : 0,
        ];
        // ev.drag is a drag event that occurs when the group resize.
        const left = offset[0] + ev.drag.beforeDist[0];
        const top = offset[1] + ev.drag.beforeDist[1];
        const width = ev.width;
        const top = ev.top;
    });
});

resizeGroupEnd

Source:
When the group resize finishes, the `resizeGroupEnd` event is called.
Type Description
Moveable.Resizable.OnResizeGroupEnd Parameters for the `resizeGroupEnd` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    resizable: true
});
moveable.on("resizeGroupEnd", ({ targets, isDrag }) => {
    console.log("onResizeGroupEnd", targets, isDrag);
});

resizeGroupStart

Source:
When the group resize starts, the `resizeGroupStart` event is called.
Type Description
Moveable.Resizable.OnResizeGroupStart Parameters for the `resizeGroupStart` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    resizable: true
});
moveable.on("resizeGroupStart", ({ targets }) => {
    console.log("onResizeGroupStart", targets);
});

resizeStart

Source:
When the resize starts, the resizeStart event is called.
Type Description
Moveable.Resizable.OnResizeStart Parameters for the resizeStart event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { resizable: true });
moveable.on("resizeStart", ({ target }) => {
    console.log(target);
});