Moveable

Moveable

Moveable is Draggable! Resizable! Scalable! Rotatable!

Constructor

new Moveable(parentElement, optionsopt)

Source:
Name Type Default Description
parentElement HTMLElement | SVGElement
options? MoveableOptions {}

Extends

Namespaces

Draggable
Resizable
Rotatable
Scalable

Members

baseDirection

Source:
Set target's base direciton using top, left, right, bottom (top: -1, left: -1, right: 1, bottom: 1) (default: [-1, -1])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  baseDirection: [-1, -1]
});

moveable.baseDirection = [-1, -1];

bounds

Source:
You can set up boundaries. (default: null)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};

className

Source:
You can specify the className of the moveable controlbox. (default: "")
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  className: "",
});

moveable.className = "moveable1";

defaultGroupRotate

Source:
Sets the initial rotation of the group. (default 0)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  target: [].slice.call(document.querySelectorAll(".target")),
  defaultGroupRotate: 0,
});

moveable.defaultGroupRotate = 40;

dragArea

Source:
Add an event to the moveable area instead of the target for stopPropagation. (default: false)
Example
import Moveable from "moveable";

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

draggable

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

const moveable = new Moveable(document.body);

moveable.draggable = true;

dragTarget

Source:
The target(s) to drag Moveable target(s) (default: target)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);
moveable.target = document.querySelector(".target");
moveable.dragTarget = document.querySelector(".dragTarget");

edge

Source:
Resize, Scale Events at edges
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);
moveable.edge = true;

elementGuidelines

Source:
Add guidelines for the element. (default: [])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.elementGuidelines = [
  document.querySelector(".element"),
];

getScrollPosition

Source:
Sets a function to get the scroll position. (default: Function)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

horizontalGuidlines

Source:
Add guidelines in the horizontal direction. (default: [])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.horizontalGuidlines = [100, 200, 500];

innerBounds

Source:
You can set up inner boundaries. (default: null)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.innerBounds = { left: 500, top: 500, width: 100, height: 100};

isDisplaySnapDigit

Source:
Whether to show snap distance (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.isDisplaySnapDigit = true;

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);

moveable.keepRatio = true;

origin

Source:
Whether or not the origin controlbox will be visible or not (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.origin = true;

padding

Source:
Add padding around the target to increase the drag area. (default: null)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
 target: document.querySelector(".target"),
 padding: { left: 0, top: 0, right: 0, bottom: 0 },
});
moveable.padding = { left: 10, top: 10, right: 10, bottom: 10 },
moveable.updateRect();

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;

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, {
  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);

moveable.resizable = true;

rotatable

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

const moveable = new Moveable(document.body);

moveable.rotatable = true;

rotationPosition

Source:
You can specify the position of the rotation. (default: "top")
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  rotationPosition: "top",
});

moveable.rotationPosition = "bottom"

scalable

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

const moveable = new Moveable(document.body);

moveable.scalable = true;

scrollable

Source:
Whether or not target can be scrolled to the scroll container (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

moveable.scrollable = true;

scrollContainer

Source:
The container to which scroll is applied (default: container)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

scrollThreshold

Source:
Expand the range of the scroll check area. (default: 0)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

snapCenter

Source:
When you drag, make the snap in the center of the target. (default: false)
Example
import Moveable from "moveable";

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

moveable.snapCenter = true;

snapDigit

Source:
snap distance digits (default: 0)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.snapDigit = 0

snapDistFormat

Source:
You can set the text format of the distance shown in the guidelines. (default: self)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
 snappable: true,
 snapDistFormat: v => v,
});
moveable.snapDistFormat = v => `${v}px`;

snapElement

Source:
When you drag, make the snap in the element guidelines. (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  snappable: true,
  snapVertical: true,
  snapHorizontal: true,
  snapElement: true,
});

moveable.snapElement = false;

snapGap

Source:
When you drag, make the gap snap in the element guidelines. (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  snappable: true,
  snapVertical: true,
  snapHorizontal: true,
  snapElement: true,
  snapGap: true,
});

moveable.snapGap = false;

snapHorizontal

Source:
When you drag, make the snap in the horizontal guidelines. (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  snappable: true,
  snapVertical: true,
  snapHorizontal: true,
  snapElement: true,
});

moveable.snapHorizontal = false;

snappable

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

const moveable = new Moveable(document.body);

moveable.snappable = true;

snapThreshold

Source:
Distance value that can snap to guidelines. (default: 5)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.snapThreshold = 5;

snapVertical

Source:
When you drag, make the snap in the vertical guidelines. (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  snappable: true,
  snapVertical: true,
  snapHorizontal: true,
  snapElement: true,
});

moveable.snapVertical = false;

target

Source:
The target to indicate Moveable Control Box.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);
moveable.target = document.querySelector(".target");

throttleDrag

Source:
throttle of x, y when drag.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleDrag = 1;

throttleDragRotate

Source:
throttle of angle of x, y when drag.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleDragRotate = 45;

throttleResize

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

const moveable = new Moveable(document.body);

moveable.throttleResize = 1;

throttleRotate

Source:
throttle of angle(degree) when rotate.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleRotate = 1;

throttleScale

Source:
throttle of scaleX, scaleY when scale.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleScale = 0.1;

verticalGuidlines

Source:
Add guidelines in the vertical direction. (default: [])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.verticalGuidlines = [100, 200, 500];

warpable

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

const moveable = new Moveable(document.body);

moveable.warpable = true;

zoom

Source:
Zooms in the elements of a moveable. (default: 1)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);
moveable.zoom = 2;

Methods

destroy() → {void}

Source:
Remove the Moveable object and the events.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.destroy();
Returns:
Type
void

dragStart(e) → {void}

Source:
You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)
Name Type Description
e MouseEvent | TouchEvent external `MouseEvent`or `TouchEvent`
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

document.body.addEventListener("mousedown", e => {
    if (!moveable.isMoveableElement(e.target)) {
         moveable.dragStart(e);
    }
});
Returns:
Type
void

getRect() → {RectInfo}

Source:
You can get the vertex information, position and offset size information of the target based on the container.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

const rectInfo = moveable.getRect();
Returns:
- The Rect Info
Type
RectInfo

hasOn(eventName) → {Boolean}

Source:
Overrides:
Checks whether an event has been attached to a component.
Name Type Description
eventName String The name of the event to be attached 등록 여부를 확인할 이벤트의 이름
Example
class Some extends eg.Component {
  some() {
    this.hasOn("hi");// check hi event.
  }
}
Returns:
Indicates whether the event is attached. 이벤트 등록 여부
Type
Boolean

hitTest(el) → {number}

Source:
Hit test an element or rect on a moveable target.
Name Type Description
el Element | HitRect element or rect to test
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

document.body.addEventListener("mousedown", e => {
    if (moveable.hitTest(e.target) > 0) {
         console.log("hiited");
    }
});
Returns:
- Get hit test rate (rate > 0 is hitted)
Type
number

isDragging() → {boolean}

Source:
Check if the moveable state is being dragged.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

// false
console.log(moveable.isDragging());

moveable.on("drag", () => {
  // true
  console.log(moveable.isDragging());
});
Returns:
Type
boolean

isInside(clientX, clientY) → {boolean}

Source:
Whether the coordinates are inside Moveable
Name Type Description
clientX number x coordinate
clientY number y coordinate
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

document.body.addEventListener("mousedown", e => {
    if (moveable.isInside(e.clientX, e.clientY)) {
         console.log("inside");
    }
});
Returns:
- True if the coordinate is in moveable or false
Type
boolean

isMoveableElement(target) → {boolean}

Source:
Check if the target is an element included in the moveable.
Name Type Description
target HTMLElement | SVGElement the target
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

window.addEventListener("click", e => {
    if (!moveable.isMoveableElement(e.target)) {
        moveable.target = e.target;
    }
});
Returns:
Type
boolean

off(eventName, handlerToDetach) → {eg.Component}

Source:
Overrides:
Detaches an event from the component.
Name Type Description
eventName eventName The name of the event to be detached 해제할 이벤트의 이름
handlerToDetach function The handler function of the event to be detached 해제할 이벤트의 핸들러 함수
Example
class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}
Returns:
An instance of a component itself 컴포넌트 자신의 인스턴스
Type
eg.Component

on(eventName, handlerToAttach) → {eg.Component}

Source:
Overrides:
Attaches an event to a component.
Name Type Description
eventName eventName The name of the event to be attached 등록할 이벤트의 이름
handlerToAttach function The handler function of the event to be attached 등록할 이벤트의 핸들러 함수
Example
class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}
Returns:
An instance of a component itself컴포넌트 자신의 인스턴스
Type
eg.Component

once(eventName, handlerToAttach) → {eg.Component}

Source:
Overrides:
Executed event just one time.
Name Type Description
eventName eventName The name of the event to be attached 등록할 이벤트의 이름
handlerToAttach function The handler function of the event to be attached 등록할 이벤트의 핸들러 함수
Example
class Some extends eg.Component {
  hi() {
    alert("hi");
  }
  thing() {
    this.once("hi", this.hi);
  }
}

var some = new Some();
some.thing();
some.trigger("hi");
// fire alert("hi");
some.trigger("hi");
// Nothing happens
Returns:
An instance of a component itself컴포넌트 자신의 인스턴스
Type
eg.Component

request(ableName, paramsopt) → {Requester}

Source:
See:
Request able through a method rather than an event. At the moment of execution, requestStart is executed, and then request and requestEnd can be executed through Requester.
Name Type Description
ableName string ableName
params? AbleRequestParam request to be able params. If isInstant is true, request and requestEnd are executed immediately.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

// Instantly Request (requestStart - request - requestEnd)
moveable.request("draggable", { deltaX: 10, deltaY: 10, isInstant: true });

// Start move
const requester = moveable.request("draggable");
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.requestEnd();
Returns:
- Able Requester. If there is no request in able, nothing will work.
Type
Requester

trigger(eventName, customEventopt, ...restParam) → {Boolean}

Source:
Overrides:
Triggers a custom event.
Name Type Default Description
eventName String The name of the custom event to be triggered 발생할 커스텀 이벤트의 이름
customEvent? Object {} Event data to be sent when triggering a custom event 커스텀 이벤트가 발생할 때 전달할 데이터
...restParam
Example
class Some extends eg.Component {
  some(){
  	if(this.trigger("beforeHi")){ // When event call to stop return false.
		this.trigger("hi");// fire hi event.
  	}
  }
}

const some = new Some();
some.on("beforeHi", (e) => {
	if(condition){
		e.stop(); // When event call to stop, `hi` event not call.
	}
});
some.on("hi", (e) => {
	// `currentTarget` is component instance.
	console.log(some === e.currentTarget); // true
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
Returns:
Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. Ref 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. 참고
Type
Boolean

updateRect() → {void}

Source:
If the width, height, left, and top of all elements change, update the shape of the moveable.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

window.addEventListener("resize", e => {
    moveable.updateRect();
});
Returns:
Type
void

updateTarget() → {void}

Source:
If the width, height, left, and top of the only target change, update the shape of the moveable.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.updateTarget();
Returns:
Type
void

Type Definitions

AbleRequestParam

Source:
Properties:
Name Type Description
isInstant? boolean Run the request instantly. (requestStart, request, requestEnd happen at the same time)
[key: string] any
Type:
  • TSInterface

BoundType

Source:
Properties:
Name Type Description
left? number
top? number
right? number
bottom? number
Type:
  • TSInterface

DraggableOptions

Source:
Properties:
Name Type Description
draggable? boolean Whether or not target can be dragged. (default: false)
throttleDrag? number throttle of x, y when drag. (default: 0)
throttleDragRotate? number throttle of angle(degree) of x,y when drag. (default: 0)
Type:
  • TSInterface

GapGuideline

Source:
Properties:
Name Type Description
renderPos number[]
Type:
  • TSInterface

GroupableOptions

Source:
Properties:
Name Type Description
defaultGroupRotate? number Sets the initial rotation of the group. (default 0)
Type:
  • TSInterface

Guideline

Source:
Properties:
Name Type Description
type "horizontal" | "vertical"
element? Element | null
center? boolean
pos number[]
size number
sizes? number[]
gap? number
gapGuidelines? Guideline[]
Type:
  • TSInterface

HitRect

Source:
Properties:
Name Type Description
top number top position
left number left position
width? number target's width
height? number target's height
Type:
  • TSInterface

InnerBoundType

Source:
Properties:
Name Type Description
left number
top number
width number
height number
Type:
  • TSInterface

MoveableDefaultProps

Source:
Properties:
Name Type Description
target? SVGElement | HTMLElement | null The target(s) to indicate Moveable Control Box. (default: null)
dragTarget? SVGElement | HTMLElement | null The target(s) to drag Moveable target(s) (default: target)
container? SVGElement | HTMLElement | null Moveable Container. (default: parentElement)
rootContainer? HTMLElement | null Moveable Root Container (No Transform Container). (default: container)
dragArea? boolean You can specify the position of the rotation. (default: "top")
origin? boolean Whether or not the origin control box will be visible or not (default: false)
zoom? number Zooms in the elements of a moveable. (default: 1)
transformOrigin? Array<string | number> | string | "" The default transformOrigin of the target can be set in advance. (default: "")
edge? boolean Whether to scale and resize through edge lines. (default: false)
ables? Able[] You can add your custom able. (default: [])
className? string You can specify the className of the moveable controlbox. (default: "")
pinchThreshold? number Minimum distance to pinch. (default: 20)
pinchOutside? boolean Whether the container containing the target becomes a pinch. (default: true)
triggerAblesSimultaneously? boolean Lets generate events of ables at the same time. (like Resizable, Scalable) (default: false)
padding? PaddingBox Add padding around the target to increase the drag area. (default: null)
Type:
  • TSInterface

MoveableOptions

Source:
Properties:
Name Type Description
snappable? boolean | string[] Whether or not target can be snapped to the guideline. (default: false)
snapCenter? boolean When you drag, make the snap in the center of the target. (default: false)
snapHorizontal? boolean When you drag, make the snap in the horizontal guidelines. (default: true)
snapVertical? boolean When you drag, make the snap in the vertical guidelines. (default: true)
snapElement? boolean When you drag, make the snap in the element guidelines. (default: true)
snapGap? boolean When you drag, make the gap snap in the element guidelines. (default: true)
snapThreshold? number Distance value that can snap to guidelines. (default: 5)
snapDigit? number snap distance digits (default: 0)
isDisplaySnapDigit? boolean Whether to show snap distance (default: true)
horizontalGuidelines? number[] Add guidelines in the horizontal direction. (default: [])
verticalGuidelines? number[] Add guidelines in the vertical direction. (default: [])
elementGuidelines? Element[] Add guidelines for the element. (default: [])
bounds? BoundType You can set up boundaries. (default: null)
innerBounds? InnerBoundType You can set up inner boundaries. (default: null)
snapDistFormat? (distance: number) => number | string You can set the text format of the distance shown in the guidelines. (default: self)
defaultGroupRotate? number Sets the initial rotation of the group. (default 0)
scrollable? boolean Whether or not target can be scrolled to the scroll container (default: false)
scrollContainer? HTMLElement The container to which scroll is applied (default: container)
scrollThreshold? number Expand the range of the scroll check area. (default: 0)
getScrollPosition? (e: {scrollContainer: HTMLElement, direction: number[]}) => number[] Sets a function to get the scroll position. (default: Function)
warpable? boolean Whether or not target can be warped. (default: false)
renderDirections? string[] Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
rotatable? boolean Whether or not target can be rotated. (default: false)
rotationPosition? "top" | "bottom" | "left" | "right" You can specify the position of the rotation. (default: "top")
throttleRotate? number throttle of angle(degree) when rotate. (default: 0)
pinchable? boolean | Array<"rotatable" | "resizable" | "scalable"> Whether or not target can be pinched with draggable, resizable, scalable, rotatable. (default: false)
scalable? boolean Whether or not target can be scaled. (default: false)
throttleScale? number throttle of scaleX, scaleY when scale. (default: 0)
renderDirections? string[] Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
keepRatio? boolean When resize or scale, keeps a ratio of the width, height. (default: false)
resizable? boolean Whether or not target can be resized. (default: false)
throttleResize? number throttle of width, height when resize. (default: 0)
renderDirections? string[] Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
baseDirection? number[] Target's base direcition using top, left, right, bottom (top: -1, left: -1, right: 1, bottom: 1) (default: [-1, -1])
keepRatio? boolean When resize or scale, keeps a ratio of the width, height. (default: false)
draggable? boolean Whether or not target can be dragged. (default: false)
throttleDrag? number throttle of x, y when drag. (default: 0)
throttleDragRotate? number throttle of angle(degree) of x,y when drag. (default: 0)
target? SVGElement | HTMLElement | null The target(s) to indicate Moveable Control Box. (default: null)
dragTarget? SVGElement | HTMLElement | null The target(s) to drag Moveable target(s) (default: target)
container? SVGElement | HTMLElement | null Moveable Container. (default: parentElement)
rootContainer? HTMLElement | null Moveable Root Container (No Transform Container). (default: container)
dragArea? boolean You can specify the position of the rotation. (default: "top")
origin? boolean Whether or not the origin control box will be visible or not (default: false)
zoom? number Zooms in the elements of a moveable. (default: 1)
transformOrigin? Array<string | number> | string | "" The default transformOrigin of the target can be set in advance. (default: "")
edge? boolean Whether to scale and resize through edge lines. (default: false)
ables? Able[] You can add your custom able. (default: [])
className? string You can specify the className of the moveable controlbox. (default: "")
pinchThreshold? number Minimum distance to pinch. (default: 20)
pinchOutside? boolean Whether the container containing the target becomes a pinch. (default: true)
triggerAblesSimultaneously? boolean Lets generate events of ables at the same time. (like Resizable, Scalable) (default: false)
padding? PaddingBox Add padding around the target to increase the drag area. (default: null)
target? HTMLElement | SVGElement | Array<SVGElement | HTMLElement>
Type:
  • TSInterface

OnClick

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
inputTarget HTMLElement | SVGElement Clicked target.
isTarget boolean Whether the clicked target is moveable target.
containsTarget boolean Whether the clicked target is a child of moveable target.
isDouble boolean Whether it is double-click
Type:
  • TSInterface

OnClickGroup

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
targets Array<HTMLElement | SVGElement> targets set to group.
inputTarget HTMLElement | SVGElement Clicked target.
isTarget boolean Whether the clicked target is on the targets set in the group.
containsTarget boolean Whether the clicked target is a child of the targets set in the group.
targetIndex number The corresponding index among the targets set as a group.
isDouble boolean Whether it is double-click
Type:
  • TSInterface

OnDrag

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
beforeDelta number[] The delta of [left, top]
beforeDist number[] The distance of [left, top]
beforeTranslate number[] The position of [left, top]
delta number[] The delta of [translateX, translateY]
dist number[] The distance of [translateX, translateY]
translate number[] The position of [translateX, translateY]
transform string a target's transform
left number a target's left
top number a target's top
bottom number a target's bottom
right number a target's right
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnDragEnd

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
isDrag boolean Whether drag called
Type:
  • TSInterface

OnDragGroup

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
beforeDelta number[] The delta of [left, top]
beforeDist number[] The distance of [left, top]
beforeTranslate number[] The position of [left, top]
delta number[] The delta of [translateX, translateY]
dist number[] The distance of [translateX, translateY]
translate number[] The position of [translateX, translateY]
transform string a target's transform
left number a target's left
top number a target's top
bottom number a target's bottom
right number a target's right
isPinch boolean Whether or not it is being pinched.
targets Array<HTMLElement | SVGElement> The dragging targets
events OnDrag[] Each `drag` event on the targets
Type:
  • TSInterface

OnDragGroupEnd

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
isDrag boolean Whether drag called
targets Array<HTMLElement | SVGElement> The drag finished targets
isDrag boolean Whether `dragGroup` called
Type:
  • TSInterface

OnDragGroupStart

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
set (translate: number[]) => void You can set the start translate value.
targets Array<HTMLElement | SVGElement> targets to drag
events OnDragStart[] Each `dragStart` event on the targets
Type:
  • TSInterface

OnDragStart

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
set (translate: number[]) => void You can set the start translate value.
Type:
  • TSInterface

OnEvent

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

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
isDrag boolean
Type:
  • TSInterface

OnPinchGroup

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
targets Array<HTMLElement | SVGElement> targets to pinch
Type:
  • TSInterface

OnPinchGroupEnd

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
isDrag boolean
targets Array<HTMLElement | SVGElement> The pinch finished targets
Type:
  • TSInterface

OnPinchGroupStart

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
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

OnRender

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
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnRenderEnd

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
isPinch boolean Whether or not it is being dragged.
isDrag boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnRenderGroup

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
isPinch boolean Whether or not it is being pinched.
targets Array<HTMLElement | SVGElement> targets set to group.
Type:
  • TSInterface

OnRenderGroupEnd

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
isPinch boolean Whether or not it is being dragged.
isDrag boolean Whether or not it is being pinched.
targets Array<HTMLElement | SVGElement> targets set to group.
Type:
  • TSInterface

OnRenderGroupStart

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
isPinch boolean Whether or not it is being pinched.
targets Array<HTMLElement | SVGElement> targets set to group.
Type:
  • TSInterface

OnRenderStart

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
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnResize

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
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 resize causes a `drag` event.
drag OnDrag
Type:
  • TSInterface

OnResizeEnd

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
isDrag boolean Whether resize called
Type:
  • TSInterface

OnResizeGroup

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
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 resize causes a `drag` event.
drag OnDrag
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
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
isDrag boolean Whether resize called
targets Array<HTMLElement | SVGElement> The resize finished targets
isDrag boolean Whether `resizeGroup` called
Type:
  • TSInterface

OnResizeGroupStart

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
direction number[] The direction of resize.
dragStart OnDragStart | false resize causes a `dragStart` event.
set (sizes: number[]) => any You can set the css width, height value.
setOrigin (origin: Array<string | number>) => any
targets Array<HTMLElement | SVGElement> targets to resize
events OnResizeStart[] Each `resizeStart` event on the targets
Type:
  • TSInterface

OnResizeStart

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
direction number[] The direction of resize.
dragStart OnDragStart | false resize causes a `dragStart` event.
set (sizes: number[]) => any You can set the css width, height value.
setOrigin (origin: Array<string | number>) => any
Type:
  • TSInterface

OnRotate

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
beforeDist number The distance of rotation rad before transform is applied
beforeDelta number The delta of rotation rad before transform is applied
beforeRotate number The now rotation rad before transform is applied
dist number The distance of rotation rad
delta number The delta of rotation rad
rotate number The now rotation rad
transform string a target's transform
isPinch boolean
Type:
  • TSInterface

OnRotateEnd

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
isDrag boolean Whether rotate called
Type:
  • TSInterface

OnRotateGroup

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
beforeDist number The distance of rotation rad before transform is applied
beforeDelta number The delta of rotation rad before transform is applied
beforeRotate number The now rotation rad before transform is applied
dist number The distance of rotation rad
delta number The delta of rotation rad
rotate number The now rotation rad
transform string a target's transform
isPinch boolean
targets Array<HTMLElement | SVGElement> The rotating targets
events Array<OnRotate & {drag: OnDrag}> Each `rotate` & `drag` event on the targets
set (rotation: number) => any You can set the current rotate value.
Type:
  • TSInterface

OnRotateGroupEnd

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
isDrag boolean Whether rotate called
targets Array<HTMLElement | SVGElement> The rotate finished targets
isDrag boolean Whether `rotateGroup` called
Type:
  • TSInterface

OnRotateGroupStart

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
set (rotate: number) => void You can set the start rotate value.
targets Array<HTMLElement | SVGElement> targets to rotate
events Array<OnRotateStart & {dragStart: OnDragStart | false}> Each `rotateStart` & `dragStart` event on the targets
Type:
  • TSInterface

OnRotateStart

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
set (rotate: number) => void You can set the start rotate value.
Type:
  • TSInterface

OnScale

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
direction number[] The direction of scale.
scale number[] a target's scale
dist number[] The distance of scale
delta number[] The delta of scale
transform string a target's transform
isPinch boolean scale causes a `drag` event.
drag OnDrag
Type:
  • TSInterface

OnScaleEnd

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
isDrag boolean Whether scale called
Type:
  • TSInterface

OnScaleGroup

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
direction number[] The direction of scale.
scale number[] a target's scale
dist number[] The distance of scale
delta number[] The delta of scale
transform string a target's transform
isPinch boolean scale causes a `drag` event.
drag OnDrag
targets Array<HTMLElement | SVGElement> The scaling targets
events Array<OnScale & {drag: OnDrag}> Each `scale` & `drag` event on the targets
Type:
  • TSInterface

OnScaleGroupEnd

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
isDrag boolean Whether scale called
targets Array<HTMLElement | SVGElement> The scale finished targets
isDrag boolean Whether `scaleGroup` called
Type:
  • TSInterface

OnScaleGroupStart

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
direction number[] The direction of scale.
dragStart OnDragStart | false scale causes a `dragStart` event.
set (scale: number[]) => void You can set the start scale value.
targets Array<HTMLElement | SVGElement> targets to scale
events OnScaleStart[] Each `scaleStart` & `dragStart` event on the targets
Type:
  • TSInterface

OnScaleStart

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
direction number[] The direction of scale.
dragStart OnDragStart | false scale causes a `dragStart` event.
set (scale: number[]) => void You can set the start scale value.
Type:
  • TSInterface

OnScroll

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
scrollContainer HTMLElement The container corresponding to scrolling area (scrollContainer >= rootContainer >= container)
direction number[] The direction of scrolling [left, top]
Type:
  • TSInterface

OnScrollGroup

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
scrollContainer HTMLElement The container corresponding to scrolling area (scrollContainer >= rootContainer >= container)
direction number[] The direction of scrolling [left, top]
targets Array<HTMLElement | SVGElement> targets set to group.
Type:
  • TSInterface

OnSnap

Source:
Properties:
Name Type Description
guidelines Guideline[] snapped verticalGuidelines, horizontalGuidelines,
elements Guideline[][] snapped elements (group by element)
gaps GapGuideline[] gaps is snapped guidelines that became gap snap between elements.
Type:
  • TSInterface

OnWarp

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
transform string a target's transform
delta number[] The delta of warp matrix
dist number[] The dist of warp matrix
matrix number[] The caculated warp matrix
multiply (matrix1: number[], matrix2: number[], n?: number) => number[] Multiply function that can multiply previous matrix by warp matrix
Type:
  • TSInterface

OnWarpEnd

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
isDrag boolean Whether rotate called
Type:
  • TSInterface

OnWarpStart

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
set (matrix: number[]) => any You can set the start matrix value.
Type:
  • TSInterface

PaddingBox

Source:
Properties:
Name Type Description
left? number left padding
top? number top padding
right? number right padding
bottom? number bottom padding
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

RectInfo

Source:
Properties:
Name Type Description
pos1 number[] The coordinates of the vertex 1
pos2 number[] The coordinates of the vertex 1
pos3 number[] The coordinates of the vertex 1
pos4 number[] The coordinates of the vertex 1
left number left position of the target relative to the container
top number top position of the target relative to the container
width number The width of moveable element
height number The height of moveable element
offsetWidth number The offset width of the target
offsetHeight number The offset height of the target
origin number[] The absolute transform origin
beforeOrigin number[] the absolute transform origin before transformation
Type:
  • TSInterface

Requester

Source:
See:
Properties:
Name Type Description
request (param: IObject<any>) => this Continue executing the request.
requestEnd (param: IObject<any>) => this End the request.
Type:
  • TSInterface

ResizableOptions

Source:
Properties:
Name Type Description
resizable? boolean Whether or not target can be resized. (default: false)
throttleResize? number throttle of width, height when resize. (default: 0)
renderDirections? string[] Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
baseDirection? number[] Target's base direcition using top, left, right, bottom (top: -1, left: -1, right: 1, bottom: 1) (default: [-1, -1])
keepRatio? boolean When resize or scale, keeps a ratio of the width, height. (default: false)
Type:
  • TSInterface

RotatableOptions

Source:
Properties:
Name Type Description
rotatable? boolean Whether or not target can be rotated. (default: false)
rotationPosition? "top" | "bottom" | "left" | "right" You can specify the position of the rotation. (default: "top")
throttleRotate? number throttle of angle(degree) when rotate. (default: 0)
Type:
  • TSInterface

ScalableOptions

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

ScrollableOptions

Source:
Properties:
Name Type Description
scrollable? boolean Whether or not target can be scrolled to the scroll container (default: false)
scrollContainer? HTMLElement The container to which scroll is applied (default: container)
scrollThreshold? number Expand the range of the scroll check area. (default: 0)
getScrollPosition? (e: {scrollContainer: HTMLElement, direction: number[]}) => number[] Sets a function to get the scroll position. (default: Function)
Type:
  • TSInterface

SnappableOptions

Source:
Properties:
Name Type Description
snappable? boolean | string[] Whether or not target can be snapped to the guideline. (default: false)
snapCenter? boolean When you drag, make the snap in the center of the target. (default: false)
snapHorizontal? boolean When you drag, make the snap in the horizontal guidelines. (default: true)
snapVertical? boolean When you drag, make the snap in the vertical guidelines. (default: true)
snapElement? boolean When you drag, make the snap in the element guidelines. (default: true)
snapGap? boolean When you drag, make the gap snap in the element guidelines. (default: true)
snapThreshold? number Distance value that can snap to guidelines. (default: 5)
snapDigit? number snap distance digits (default: 0)
isDisplaySnapDigit? boolean Whether to show snap distance (default: true)
horizontalGuidelines? number[] Add guidelines in the horizontal direction. (default: [])
verticalGuidelines? number[] Add guidelines in the vertical direction. (default: [])
elementGuidelines? Element[] Add guidelines for the element. (default: [])
bounds? BoundType You can set up boundaries. (default: null)
innerBounds? InnerBoundType You can set up inner boundaries. (default: null)
snapDistFormat? (distance: number) => number | string You can set the text format of the distance shown in the guidelines. (default: self)
Type:
  • TSInterface

WarpableOptions

Source:
Properties:
Name Type Description
warpable? boolean Whether or not target can be warped. (default: false)
renderDirections? string[] Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
Type:
  • TSInterface

Events

click

Source:
When you click on the element, the `click` event is called.
Type Description
Moveable.OnClick Parameters for the `click` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
});
moveable.on("click", ({ hasTarget, containsTarget, targetIndex }) => {
    // If you click on an element other than the target and not included in the target, index is -1.
    console.log("onClickGroup", target, hasTarget, containsTarget, targetIndex);
});

clickGroup

Source:
When you click on the element inside the group, the `clickGroup` event is called.
Type Description
Moveable.OnClickGroup Parameters for the `clickGroup` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
});
moveable.on("clickGroup", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {
    // If you click on an element other than the target and not included in the target, index is -1.
    console.log("onClickGroup", inputTarget, isTarget, containsTarget, targetIndex);
});

drag

Source:
When dragging, the drag event is called.
Type Description
Moveable.OnDrag Parameters for the drag event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { draggable: true });
moveable.on("drag", ({ target, transform }) => {
    target.style.transform = transform;
});

dragEnd

Source:
When the drag finishes, the dragEnd event is called.
Type Description
Moveable.OnDragEnd Parameters for the dragEnd event
Example
import Moveable from "moveable";

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

dragGroup

Source:
When the group drag, the `dragGroup` event is called.
Type Description
Moveable.OnDragGroup Parameters for the `dragGroup` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    draggable: true
});
moveable.on("dragGroup", ({ targets, events }) => {
    console.log("onDragGroup", targets);
    events.forEach(ev => {
         // drag event
         console.log("onDrag left, top", ev.left, ev.top);
         // ev.target!.style.left = `${ev.left}px`;
         // ev.target!.style.top = `${ev.top}px`;
         console.log("onDrag translate", ev.dist);
         ev.target!.style.transform = ev.transform;)
    });
});

dragGroupEnd

Source:
When the group drag finishes, the `dragGroupEnd` event is called.
Type Description
Moveable.OnDragGroupEnd Parameters for the `dragGroupEnd` event
Example
import Moveable from "moveable";

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

dragGroupStart

Source:
When the group drag starts, the `dragGroupStart` event is called.
Type Description
Moveable.OnDragGroupStart Parameters for the `dragGroupStart` event
Example
import Moveable from "moveable";

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

dragStart

Source:
When the drag starts, the dragStart event is called.
Type Description
Moveable.OnDragStart Parameters for the dragStart event
Example
import Moveable from "moveable";

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

pinch

Source:
When pinching, the pinch event is called with part of scale, rotate, resize
Type Description
Moveable.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.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.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.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.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.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);
});

render

Source:
`render` event occurs before the target is drawn on the screen.
Type Description
Moveable.OnRender Parameters for the `render` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
});
moveable.on("render", ({ target }) => {
    console.log("onRender", target);
});

renderEnd

Source:
`renderEnd` event occurs at the end of all events.
Type Description
Moveable.OnRenderEnd Parameters for the `renderEnd` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
});
moveable.on("renderEnd", ({ target }) => {
    console.log("onRenderEnd", target);
});

renderGroup

Source:
`renderGroup` event occurs before the target is drawn on the screen in group.
Type Description
Moveable.OnRenderGroup Parameters for the `renderGroup` event
Example
import Moveable from "moveable";

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

renderGroupEnd

Source:
`renderGroupEnd` event occurs at the end of all events in group.
Type Description
Moveable.OnRenderGroupEnd Parameters for the `renderGroupEnd` event
Example
import Moveable from "moveable";

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

renderGroupStart

Source:
`renderGroupStart` event occurs at the first start of all events in group.
Type Description
Moveable.OnRenderGroupStart Parameters for the `renderGroupStart` event
Example
import Moveable from "moveable";

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

renderStart

Source:
`renderStart` event occurs at the first start of all events.
Type Description
Moveable.OnRenderStart Parameters for the `renderStart` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
});
moveable.on("renderStart", ({ target }) => {
    console.log("onRenderStart", target);
});

resize

Source:
When resizing, the resize event is called.
Type Description
Moveable.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.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.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.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.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.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);
});

rotate

Source:
When rotating, the rotate event is called.
Type Description
Moveable.OnRotate Parameters for the rotate event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { rotatable: true });
moveable.on("rotate", ({ target, transform, dist }) => {
    target.style.transform = transform;
});

rotateEnd

Source:
When the rotate finishes, the rotateEnd event is called.
Type Description
Moveable.OnRotateEnd Parameters for the rotateEnd event
Example
import Moveable from "moveable";

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

rotateGroup

Source:
When the group rotate, the `rotateGroup` event is called.
Type Description
Moveable.OnRotateGroup Parameters for the `rotateGroup` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    rotatable: true
});
moveable.on("rotateGroup", ({ targets, events }) => {
    console.log("onRotateGroup", targets);
    events.forEach(ev => {
        const target = ev.target;
        // ev.drag is a drag event that occurs when the group rotate.
        const left = ev.drag.beforeDist[0];
        const top = ev.drag.beforeDist[1];
        const deg = ev.beforeDist;
    });
});

rotateGroupEnd

Source:
When the group rotate finishes, the `rotateGroupEnd` event is called.
Type Description
Moveable.OnRotateGroupEnd Parameters for the `rotateGroupEnd` event
Example
import Moveable from "moveable";

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

rotateGroupStart

Source:
When the group rotate starts, the `rotateGroupStart` event is called.
Type Description
Moveable.OnRotateGroupStart Parameters for the `rotateGroupStart` event
Example
import Moveable from "moveable";

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

rotateStart

Source:
When the rotate starts, the rotateStart event is called.
Type Description
Moveable.OnRotateStart Parameters for the rotateStart event
Example
import Moveable from "moveable";

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

scale

Source:
When scaling, the scale event is called.
Type Description
Moveable.OnScale Parameters for the scale event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { scalable: true });
moveable.on("scale", ({ target, transform, dist }) => {
    target.style.transform = transform;
});

scaleEnd

Source:
When the scale finishes, the scaleEnd event is called.
Type Description
Moveable.OnScaleEnd Parameters for the scaleEnd event
Example
import Moveable from "moveable";

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

scaleGroup

Source:
When the group scale, the `scaleGroup` event is called.
Type Description
Moveable.OnScaleGroup Parameters for the `scaleGroup` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
    scalable: true
});
moveable.on("scaleGroup", ({ targets, events }) => {
    console.log("onScaleGroup", targets);
    events.forEach(ev => {
        const target = ev.target;
        // ev.drag is a drag event that occurs when the group scale.
        const left = ev.drag.beforeDist[0];
        const top = ev.drag.beforeDist[1];
        const scaleX = ev.scale[0];
        const scaleY = ev.scale[1];
    });
});

scaleGroupEnd

Source:
When the group scale finishes, the `scaleGroupEnd` event is called.
Type Description
Moveable.OnScaleGroupEnd Parameters for the `scaleGroupEnd` event
Example
import Moveable from "moveable";

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

scaleGroupStart

Source:
When the group scale starts, the `scaleGroupStart` event is called.
Type Description
Moveable.OnScaleGroupStart Parameters for the `scaleGroupStart` event
Example
import Moveable from "moveable";

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

scaleStart

Source:
When the scale starts, the scaleStart event is called.
Type Description
Moveable.OnScaleStart Parameters for the scaleStart event
Example
import Moveable from "moveable";

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

scroll

Source:
When the drag cursor leaves the scrollContainer, the `scroll` event occur to scroll.
Type Description
Moveable.OnScroll Parameters for the `scroll` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});

scrollGroup

Source:
When the drag cursor leaves the scrollContainer, the `scrollGroup` event occur to scroll in group.
Type Description
Moveable.OnScrollGroup Parameters for the `scrollGroup` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});

snap

Source:
When you drag or dragControl, the `snap` event is called.
Type Description
Moveable.OnSnap Parameters for the `snap` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    snappable: true
});
moveable.on("snap", e => {
    console.log("onSnap", e);
});

warp

Source:
When warping, the warp event is called.
Type Description
Moveable.OnWarp Parameters for the warp event
Example
import Moveable from "moveable";
let matrix = [
 1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 0, 0, 0, 1,
];
const moveable = new Moveable(document.body, { warpable: true });
moveable.on("warp", ({ target, transform, delta, multiply }) => {
   // target.style.transform = transform;
   matrix = multiply(matrix, delta);
   target.style.transform = `matrix3d(${matrix.join(",")})`;
});

warpEnd

Source:
When the warp finishes, the warpEnd event is called.
Type Description
Moveable.OnWarpEnd Parameters for the warpEnd event
Example
import Moveable from "moveable";

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

warpStart

Source:
When the warp starts, the warpStart event is called.
Type Description
Moveable.OnWarpStart Parameters for the warpStart event
Example
import Moveable from "moveable";

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