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:
currentTarget
currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable
moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
target
target: HTMLElement | SVGElement
The Moveable's target
clientX
clientX: number
The horizontal coordinate within the application's client area at which the event occurred.
clientY
clientY: number
The vertical coordinate within the application's client area at which the event occurred.
isFirstDrag
isFirstDrag: number
Whether this is the first drag in the drag event
datas
datas: IObject<any>
Objects that can send information to the following events.
inputEvent
inputEvent: any
The mouse or touch input event that is invoking the moveable event
stopAble
stopAble: () => void
Stop the currently working able.
stopDrag
stopDrag: () => void
Calling `stopDrag` in a drag-related event ends the drag.
isTrusted
isTrusted: boolean
Whether the event did not occur externally
Type:
  • TSInterface

OnPinchEnd

Source:
Properties:
currentTarget
currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable
moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
target
target: HTMLElement | SVGElement
The Moveable's target
clientX
clientX: number
The horizontal coordinate within the application's client area at which the event occurred.
clientY
clientY: number
The vertical coordinate within the application's client area at which the event occurred.
isFirstDrag
isFirstDrag: number
Whether this is the first drag in the drag event
datas
datas: IObject<any>
Objects that can send information to the following events.
inputEvent
inputEvent: any
The mouse or touch input event that is invoking the moveable event
stopAble
stopAble: () => void
Stop the currently working able.
stopDrag
stopDrag: () => void
Calling `stopDrag` in a drag-related event ends the drag.
isTrusted
isTrusted: boolean
Whether the event did not occur externally
lastEvent
lastEvent: any | undefined
This is the last dragged event. No, if you haven't dragged.
isDrag
isDrag: boolean
Whether this moved
isDouble
isDouble: boolean
Whether it is double-click
Type:
  • TSInterface

OnPinchGroup

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

OnPinchGroupEnd

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

OnPinchGroupStart

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

OnPinchStart

Source:
Properties:
currentTarget
currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable
moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
target
target: HTMLElement | SVGElement
The Moveable's target
clientX
clientX: number
The horizontal coordinate within the application's client area at which the event occurred.
clientY
clientY: number
The vertical coordinate within the application's client area at which the event occurred.
isFirstDrag
isFirstDrag: number
Whether this is the first drag in the drag event
datas
datas: IObject<any>
Objects that can send information to the following events.
inputEvent
inputEvent: any
The mouse or touch input event that is invoking the moveable event
stopAble
stopAble: () => void
Stop the currently working able.
stopDrag
stopDrag: () => void
Calling `stopDrag` in a drag-related event ends the drag.
isTrusted
isTrusted: boolean
Whether the event did not occur externally
Type:
  • TSInterface

PinchableOptions

Source:
Properties:
pinchable optional
Default Value: false
pinchable?: boolean | Array<"rotatable" | "resizable" | "scalable">
Whether or not target can be pinched with draggable, resizable, scalable, rotatable.
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);
});