Pinchable

Moveable. Pinchable

Source:
Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)

Members

pinchable

Source:
Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.pinchable = true;

Type Definitions

OnPinch

Source:
Properties:
Name Type Description
currentTarget MoveableInterface 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
Type:
  • TSInterface

OnPinchEnd

Source:
Properties:
Name Type Description
currentTarget MoveableInterface 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

OnPinchGroup

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> targets to pinch
Type:
  • TSInterface

OnPinchGroupEnd

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

OnPinchGroupStart

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> targets to pinch
Type:
  • TSInterface

OnPinchStart

Source:
Properties:
Name Type Description
currentTarget MoveableInterface 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
Type:
  • TSInterface

PinchableOptions

Source:
Properties:
Name Type Description
pinchable? boolean | Array<"rotatable" | "resizable" | "scalable"> Whether or not target can be pinched with draggable, resizable, scalable, rotatable. (default: false)
Type:
  • TSInterface

Events

pinch

Source:
When pinching, the pinch event is called with part of scale, rotate, resize
Type Description
Moveable.Pinchable.OnPinch Parameters for the pinch event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    rotatable: true,
    scalable: true,
    pinchable: true, // ["rotatable", "scalable"]
});
moveable.on("pinch", ({ target }) => {
    console.log(target);
});
moveable.on("rotate", ({ target }) => {
    console.log(target);
});
moveable.on("scale", ({ target }) => {
    console.log(target);
});

pinchEnd

Source:
When the pinch finishes, the pinchEnd event is called.
Type Description
Moveable.Pinchable.OnPinchEnd Parameters for the pinchEnd event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    rotatable: true,
    scalable: true,
    pinchable: true, // ["rotatable", "scalable"]
});
moveable.on("pinchEnd", ({ target }) => {
    console.log(target);
});
moveable.on("rotateEnd", ({ target }) => {
    console.log(target);
});
moveable.on("scaleEnd", ({ target }) => {
    console.log(target);
});

pinchGroup

Source:
When the group pinch, the `pinchGroup` event is called.
Type Description
Moveable.Pinchable.OnPinchGroup Parameters for the `pinchGroup` event
Example
import Moveable from "moveable";

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

pinchGroupEnd

Source:
When the group pinch finishes, the `pinchGroupEnd` event is called.
Type Description
Moveable.Pinchable.OnPinchGroupEnd Parameters for the `pinchGroupEnd` event
Example
import Moveable from "moveable";

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

pinchGroupStart

Source:
When the group pinch starts, the `pinchGroupStart` event is called.
Type Description
Moveable.Pinchable.OnPinchGroupStart Parameters for the `pinchGroupStart` event
Example
import Moveable from "moveable";

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

pinchStart

Source:
When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart
Type Description
Moveable.Pinchable.OnPinchStart Parameters for the pinchStart event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    rotatable: true,
    scalable: true,
    pinchable: true, // ["rotatable", "scalable"]
});
moveable.on("pinchStart", ({ target }) => {
    console.log(target);
});
moveable.on("rotateStart", ({ target }) => {
    console.log(target);
});
moveable.on("scaleStart", ({ target }) => {
    console.log(target);
});