Moveable

Moveable

Moveable is Draggable! Resizable! Scalable! Rotatable!

Constructor

new Moveable(parentElement, optionsopt)

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

Extends

Namespaces

Snappable
Warpable
Scrollable
Scalable
Roundable
Rotatable
Resizable
Pinchable
OriginDraggable
Group
Draggable
Clippable

Members

zoom

Source:
Default Value:
  • 1
Zooms in the elements of a moveable.
Example
import Moveable from "moveable";

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

useResizeObserver

Source:
Default Value:
  • false
Whether the target size is detected and updated whenever it changes.
Example
import Moveable from "moveable";

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

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

passDragArea

Source:
Set `pointerEvents: none;` css to pass events in dragArea. (default: false)
Example
import Moveable from "moveable";

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

padding

Source:
Default Value:
  • null
Add padding around the target to increase the drag area.
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();

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;

edge

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

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

dragTarget

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

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

dragArea

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

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

className

Source:
Default Value:
  • ""
You can specify the className of the moveable controlbox.
Example
import Moveable from "moveable";

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

moveable.className = "moveable1";

Methods

waitToChangeTarget() → {Promise<void>}

Source:
Story Example:
User changes target and waits for target to change.
Example
document.querySelector(".target").addEventListener("mousedown", e => {
  moveable.waitToChangeTarget().then(() => {
     moveable.dragStart(e, e.currentTarget);
  });
  moveable.target = e.currentTarget;
});
Returns:
Type
Promise<void>

updateTarget(typeopt)

Source:
Deprecated:
  • Yes
If the width, height, left, and top of the only target change, update the shape of the moveable. Use `.updateRect()` method
Name Type Description
type? "Start" | "" | "End"
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.updateTarget();

updateSelectors()

Source:
If the element list corresponding to the selector among the targets is changed, it is updated.
Example
import Moveable from "moveable";

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

moveable.updateSelectors();

updateRect(typeopt, isTargetopt, isSetStateopt)

Source:
If the width, height, left, and top of all elements change, update the shape of the moveable.
Name Type Default Description
type? "Start" | "" | "End"
isTarget? boolean
isSetState? boolean true
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

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

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName Name | ... Event name
param? TargetParam<any> | ... {} Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends TargetParam<Param> ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

stopDrag(typeopt) → {void}

Source:
You can stop the dragging currently in progress through a method from outside.
Name Type Description
type? "target" | "control"
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.stopDrag();
Returns:
- The Rect Info
Type
void

request(ableName, paramopt, isInstantopt) → {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 Default Description
ableName string ableName
param? IObject<any> {} request to be able params.
isInstant? boolean 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 }, 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

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Overrides:
Add a disposable listener and Use promise to the registered event.
Name Type Description
eventName Name Name of the event to be added
listener? EventListener<Param, this> disposable listener function of the event to be added
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
Returns:
Type
Promise<OnEvent<Param, this>>

on(eventName, listeneropt) → {this}

Source:
Overrides:
Add a listener to the registered event.
Name Type Description
eventName string | object | ... Name of the event to be added
listener? EventListener<Events[any], this> | ... listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName Name
listener EventListener<Param, this>

on(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});
Returns:
Type
this

off(eventNameopt, listeneropt) → {this}

Source:
Overrides:
Remove listeners registered in the event target.
Name Type Description
eventName? string | object | ... Name of the event to be removed
listener? EventListener<Events[any], this> | ... listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName? Name
listener? EventListener<Param, this>

off(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
Returns:
Type
this

isMoveableElement(target)

Source:
Check if the target is an element included in the moveable.
Name Type Description
target Element 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;
    }
});

isInside(clientX, clientY)

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

isDragging(ableNameopt)

Source:
Check if the moveable state is being dragged.
Name Type Description
ableName? string If you want to check if able is dragging, specify ableName.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

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

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

hitTest(el) → {number}

Source:
Hit test an element or rect on a moveable target. (100% = 100)
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

getTargets()

Source:
Get targets set in moveable through target or targets of props.
Example
import Moveable from "moveable";

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

console.log(moveable.getTargets());

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

getManager() → {MoveableManagerInterface<any, any>}

Source:
Get a manager that manages the moveable's state and props.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

const manager = moveable.getManager(); // real moveable class instance
Returns:
- The Rect Info
Type
MoveableManagerInterface<any, any>

getDragElement() → {HTMLElement | SVGElement | null | undefined}

Source:
Target element to be dragged in moveable
Returns:
Type
HTMLElement | SVGElement | null | undefined

getControlBoxElement() → {HTMLElement}

Source:
Returns the element of the control box.
Returns:
Type
HTMLElement

getAble<T extends Able>(ableName) → {T | undefined}

Source:
Get the able used in MoveableManager.
Name Type Description
ableName string able name
Returns:
Type
T | undefined

emit(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName string | ... Event name
param? TargetParam<any> | ... {} Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

dragStart(e, targetopt)

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

const moveable = new Moveable(document.body);

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

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

Type Definitions

AbleRequesters

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

AbleRequestParam

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

CSSObject

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
Type:
  • TSInterface

DefaultOptions

Source:
Properties:
target optional
Default Value: null
target?: SVGElement | HTMLElement | null
The target(s) to indicate Moveable Control Box.
dragTarget optional
Default Value: target
dragTarget?: MoveableRefType | null
The external target(s) to drag Moveable target(s)
dragTargetSelf optional
Default Value: false
dragTargetSelf?: boolean
If dragTarget is set directly, taget itself cannot be dragged. Whether to drag the target as well.
dragContainer optional
Default Value: window
dragContainer?: null | Window | MoveableRefType<HTMLElement>
Container area where drag works
container optional
Default Value: parentElement
container?: SVGElement | HTMLElement | null
A container into which Moveables are inserted. Set it only when used within the slot of Web Components or when the container is different.
rootContainer optional
Story Example: options--options-root-container
Default Value: parentElement
rootContainer?: MoveableRefType<HTMLElement>
Moveable Root Container (No Transformed Container)
viewContainer optional
Story Example: options--options-view-container
Default Value: null
viewContainer?: MoveableRefType<HTMLElement>
If you want to set the dragging information to the viewer, refer to the following.
useResizeObserver optional
Story Example: options--options-resize-observer
Default Value: false
useResizeObserver?: boolean
Whether the target size is detected and updated whenever it changes. It is more effective when used together with `useMutationObserver`.
useMutationObserver optional
Story Example: options--options-mutation-observer
Default Value: false
useMutationObserver?: boolean
Whether the target size, pos in inline style is detected and updated whenever it changes. It is more effective when used together with `useResizeObserver`.
zoom optional
Default Value: 1
zoom?: number
Zooms in the elements of a moveable.
transformOrigin optional
Default Value: ""
transformOrigin?: Array<string | number> | string | ""
The default transformOrigin of the target can be set in advance.
ables optional
Default Value: []
ables?: Able[]
You can add your custom able.
className optional
Default Value: ""
className?: string
You can specify the className of the moveable controlbox.
pinchThreshold optional
Default Value: 20
pinchThreshold?: number
Minimum distance to pinch.
pinchOutside optional
Default Value: true
pinchOutside?: boolean
Whether the container containing the target becomes a pinch.
triggerAblesSimultaneously optional
Default Value: false
triggerAblesSimultaneously?: boolean
Lets generate events of ables at the same time. (like Resizable, Scalable)
checkInput optional
Default Value: false
checkInput?: boolean
Checks whether this is an element to input text or contentEditable, and prevents dragging.
cspNonce optional
Default Value: ""
cspNonce?: string
add nonce property to style for CSP.
translateZ optional
Default Value: 50
translateZ?: number | string
You can set the translateZ value of moveable.
hideDefaultLines optional
Default Value: false
hideDefaultLines?: boolean
Whether to hide the line corresponding to the rect of the target.
stopPropagation optional
Default Value: false
stopPropagation?: boolean
Whether to prevent bubbling of events like mousedown, touchstart, etc.
preventDefault optional
Since: 0.44.0
Default Value: true
preventDefault?: boolean
Whether to call preventDefault on touchstart or mousedown
preventRightClick optional
Default Value: true
preventRightClick?: boolean
Whether to prevent dragging using the right mouse button
preventWheelClick optional
Default Value: true
preventWheelClick?: boolean
Whether to prevent dragging using the wheel (middle) mouse button
preventClickEventOnDrag optional
Default Value: true
preventClickEventOnDrag?: boolean
Prevent click event on drag. (mousemove, touchmove)
dragFocusedInput optional
Since: 0.47.0
Story Example: options--options-drag-focused-input
Default Value: false
dragFocusedInput?: boolean
Whether to drag the focused input If `checkInput` is true, this option is not applied.
preventClickDefault optional
Default Value: false
preventClickDefault?: boolean
Prevent click event on dragStart. (mousedown, touchstart)
props optional
Default Value: empty object
props?: Record<string, any>
You can use props in object format or custom props.
persistData optional
Default Value: null
persistData?: PersistRectData | null
Data for first render
useAccuratePosition optional
Default Value: false
useAccuratePosition?: boolean
Whether to accurately show the position of a movable control box Because getBoundingClientRect is used, css zoom, transform: rotate between container and rootContainer cannot be used. group is not supported.
linePadding optional
Since: 0.43.0
Story Example: options--options-line-padding
Default Value: 0
linePadding?: number
By adding padding to the line, you can increase the area of the line that can be clicked and dragged.
controlPadding optional
Since: 0.44.0
Story Example: options--options-control-padding
Default Value: 0
controlPadding?: number
By adding padding to the control, you can increase the area of the control that can be clicked and dragged. Either `rotateAroundControls` or `displayAroundControls` can be used.
flushSync optional
Default Value: empty function
flushSync?: (callback: () => void) => void
If you are using React 18's concurrent mode, use `flushSync` for UI sync.
Examples 
```jsx
import { flushSync } from "react-dom";

<Moveable flushSync={flushSync} />
```
Type:
  • TSInterface

DragAreaOptions

Source:
Properties:
dragArea optional
Default Value: if group, true, else fals
dragArea?: boolean
Instead of firing an event on the target, we add it to the moveable control element. You can use click and clickGroup events.
passDragArea optional
Default Value: false
passDragArea?: boolean
Set `pointerEvents: none;` css to pass events in dragArea.
Type:
  • TSInterface

ElementSizes

Source:
Properties:
svg
svg: boolean
offsetWidth
offsetWidth: number
offsetHeight
offsetHeight: number
clientWidth
clientWidth: number
clientHeight
clientHeight: number
inlineCSSWidth
inlineCSSWidth: number
inlineCSSHeight
inlineCSSHeight: number
cssWidth
cssWidth: number
cssHeight
cssHeight: number
contentWidth
contentWidth: number
contentHeight
contentHeight: number
minWidth
minWidth: number
minHeight
minHeight: number
maxWidth
maxWidth: number
maxHeight
maxHeight: number
minOffsetWidth
minOffsetWidth: number
minOffsetHeight
minOffsetHeight: number
maxOffsetWidth
maxOffsetWidth: number
maxOffsetHeight
maxOffsetHeight: number
Type:
  • TSInterface

GroupRect

Source:
Properties:
pos1
pos1: number[]
pos2
pos2: number[]
pos3
pos3: number[]
pos4
pos4: number[]
minX
minX: number
minY
minY: number
maxX
maxX: number
maxY
maxY: number
width
width: number
height
height: number
rotation
rotation: number
Type:
  • TSInterface

HitRect

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

In

Source:
You can make Able that can work in Moveable.

LineDirection

Source:
Type:
  • "n" | "e" | "s" | "w" | "nw" | "ne" | "sw" | "se"

MoveableDefaultEvents

Source:
Properties:
onChangeTargets optional
onChangeTargets?: (e: OnChangeTargets) => void
Type:
  • TSInterface

MoveableDefaultProps

Source:
Properties:
onChangeTargets optional
onChangeTargets?: (e: OnChangeTargets) => void
Type:
  • TSInterface

MoveableGroupInterface<T, U>

Source:
Properties:
getManager
getManager: () => MoveableManagerInterface<any, any>
getRect
getRect: () => RectInfo
getAble
getAble: <T extends Able>(ableName: string) => T | undefined
isMoveableElement
isMoveableElement: (target: Element) => boolean
updateRect
updateRect: (type?: "Start" | "" | "End", isTarget?: boolean, isSetState?: boolean) => void
If the location or size of the target is changed, call the `.updateRect()` method. Use the `useResizeObserver` and `useMutationObserver` props to update automatically.
updateTarget
updateTarget: () => void
request
request: <RequestParam extends AbleRequesters[Name], Name extends string = string>(ableName: Name, params?: RequestParam, isInstant?: boolean) => Requester<RequestParam>
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.
Examples 
import Moveable from "moveable";

const moveable = new Moveable(document.body);

// Instantly Request (requestStart - request - requestEnd)
moveable.request("draggable", { deltaX: 10, deltaY: 10 }, 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();

Refer to:

getMoveables
getMoveables: () => MoveableManagerInterface[]
moveable is the top level that manages targets `Single`: MoveableManager instance `Group`: MoveableGroup instance `IndividualGroup`: MoveableIndividaulGroup instance Returns leaf target MoveableManagers.
getControlBoxElement
getControlBoxElement: () => HTMLElement
Returns the element of the control box.
getDragElement
getDragElement: () => HTMLElement | SVGElement | null | undefined
Target element to be dragged in moveable
destroy
destroy: () => void
dragStart
dragStart: (e: MouseEvent | TouchEvent, target?: EventTarget | null) => void
isInside
isInside: (clientX: number, clientY: number) => boolean
isDragging
isDragging: (ableName?: string) => boolean
hitTest
hitTest: (el: Element | HitRect) => number
setState
setState: (state: any, callback?: () => any) => any
waitToChangeTarget
waitToChangeTarget: () => Promise<void>
forceUpdate
forceUpdate: (callback?: () => any) => any
updateSelectors
updateSelectors: () => void
getTargets
getTargets: () => Array<HTMLElement | SVGElement>
stopDrag
stopDrag: (type?: "target" | "control") => void
moveables optional
moveables?: MoveableManagerInterface[]
props
props: MoveableManagerProps<T>
state
state: MoveableManagerState<U>
renderState
renderState: Record<string, any>
rotation
rotation: number
scale
scale: number[]
controlGesto
controlGesto: Gesto
targetGesto
targetGesto: Gesto
enabledAbles
enabledAbles: Able[]
controlAbles
controlAbles: Able[]
targetAbles
targetAbles: Able[]
areaElement
areaElement: HTMLElement
controlBox
controlBox: HTMLElement
isUnmounted
isUnmounted: boolean
useCSS
useCSS: (tag: string, css: string) => any
getContainer
getContainer: () => HTMLElement | SVGElement
getRotation
getRotation: () => number
getState
getState: () => MoveableManagerState<U>
triggerEvent
triggerEvent: (name: string, params: IObject<any>, isManager?: boolean) => any
props
props: MoveableManagerProps<T> & {targets: Array<HTMLElement | SVGElement>}
transformOrigin
transformOrigin: string
renderGroupRects
renderGroupRects: GroupRect[]
getRequestChildStyles
getRequestChildStyles: () => string[]
Type:
  • TSInterface

MoveableInterface

Source:
Properties:
getManager
getManager: () => MoveableManagerInterface<any, any>
getRect
getRect: () => RectInfo
getAble
getAble: <T extends Able>(ableName: string) => T | undefined
isMoveableElement
isMoveableElement: (target: Element) => boolean
updateRect
updateRect: (type?: "Start" | "" | "End", isTarget?: boolean, isSetState?: boolean) => void
If the location or size of the target is changed, call the `.updateRect()` method. Use the `useResizeObserver` and `useMutationObserver` props to update automatically.
updateTarget
updateTarget: () => void
request
request: <RequestParam extends AbleRequesters[Name], Name extends string = string>(ableName: Name, params?: RequestParam, isInstant?: boolean) => Requester<RequestParam>
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.
Examples 
import Moveable from "moveable";

const moveable = new Moveable(document.body);

// Instantly Request (requestStart - request - requestEnd)
moveable.request("draggable", { deltaX: 10, deltaY: 10 }, 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();

Refer to:

getMoveables
getMoveables: () => MoveableManagerInterface[]
moveable is the top level that manages targets `Single`: MoveableManager instance `Group`: MoveableGroup instance `IndividualGroup`: MoveableIndividaulGroup instance Returns leaf target MoveableManagers.
getControlBoxElement
getControlBoxElement: () => HTMLElement
Returns the element of the control box.
getDragElement
getDragElement: () => HTMLElement | SVGElement | null | undefined
Target element to be dragged in moveable
destroy
destroy: () => void
dragStart
dragStart: (e: MouseEvent | TouchEvent, target?: EventTarget | null) => void
isInside
isInside: (clientX: number, clientY: number) => boolean
isDragging
isDragging: (ableName?: string) => boolean
hitTest
hitTest: (el: Element | HitRect) => number
setState
setState: (state: any, callback?: () => any) => any
waitToChangeTarget
waitToChangeTarget: () => Promise<void>
forceUpdate
forceUpdate: (callback?: () => any) => any
updateSelectors
updateSelectors: () => void
getTargets
getTargets: () => Array<HTMLElement | SVGElement>
stopDrag
stopDrag: (type?: "target" | "control") => void
Type:
  • TSInterface

MoveableManagerInterface<T, U>

Source:
Properties:
getManager
getManager: () => MoveableManagerInterface<any, any>
getRect
getRect: () => RectInfo
getAble
getAble: <T extends Able>(ableName: string) => T | undefined
isMoveableElement
isMoveableElement: (target: Element) => boolean
updateRect
updateRect: (type?: "Start" | "" | "End", isTarget?: boolean, isSetState?: boolean) => void
If the location or size of the target is changed, call the `.updateRect()` method. Use the `useResizeObserver` and `useMutationObserver` props to update automatically.
updateTarget
updateTarget: () => void
request
request: <RequestParam extends AbleRequesters[Name], Name extends string = string>(ableName: Name, params?: RequestParam, isInstant?: boolean) => Requester<RequestParam>
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.
Examples 
import Moveable from "moveable";

const moveable = new Moveable(document.body);

// Instantly Request (requestStart - request - requestEnd)
moveable.request("draggable", { deltaX: 10, deltaY: 10 }, 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();

Refer to:

getMoveables
getMoveables: () => MoveableManagerInterface[]
moveable is the top level that manages targets `Single`: MoveableManager instance `Group`: MoveableGroup instance `IndividualGroup`: MoveableIndividaulGroup instance Returns leaf target MoveableManagers.
getControlBoxElement
getControlBoxElement: () => HTMLElement
Returns the element of the control box.
getDragElement
getDragElement: () => HTMLElement | SVGElement | null | undefined
Target element to be dragged in moveable
destroy
destroy: () => void
dragStart
dragStart: (e: MouseEvent | TouchEvent, target?: EventTarget | null) => void
isInside
isInside: (clientX: number, clientY: number) => boolean
isDragging
isDragging: (ableName?: string) => boolean
hitTest
hitTest: (el: Element | HitRect) => number
setState
setState: (state: any, callback?: () => any) => any
waitToChangeTarget
waitToChangeTarget: () => Promise<void>
forceUpdate
forceUpdate: (callback?: () => any) => any
updateSelectors
updateSelectors: () => void
getTargets
getTargets: () => Array<HTMLElement | SVGElement>
stopDrag
stopDrag: (type?: "target" | "control") => void
moveables optional
moveables?: MoveableManagerInterface[]
props
props: MoveableManagerProps<T>
state
state: MoveableManagerState<U>
renderState
renderState: Record<string, any>
rotation
rotation: number
scale
scale: number[]
controlGesto
controlGesto: Gesto
targetGesto
targetGesto: Gesto
enabledAbles
enabledAbles: Able[]
controlAbles
controlAbles: Able[]
targetAbles
targetAbles: Able[]
areaElement
areaElement: HTMLElement
controlBox
controlBox: HTMLElement
isUnmounted
isUnmounted: boolean
useCSS
useCSS: (tag: string, css: string) => any
getContainer
getContainer: () => HTMLElement | SVGElement
getRotation
getRotation: () => number
getState
getState: () => MoveableManagerState<U>
triggerEvent
triggerEvent: (name: string, params: IObject<any>, isManager?: boolean) => any
Type:
  • TSInterface

MoveableOptions

Source:
Properties:
clickable optional
Default Value: true
clickable?: boolean
Whether to trigger the moveable's click event.
roundable optional
Default Value: false
roundable?: boolean
Whether to show and drag border-radius.
roundRelative optional
Default Value: false
roundRelative?: boolean
% Can be used instead of the absolute px
minRoundControls optional
Default Value: [0, 0]
minRoundControls?: number[]
Minimum number of round controls. It moves in proportion by control. [horizontal, vertical]
maxRoundControls optional
Default Value: [4, 4]
maxRoundControls?: number[]
Maximum number of round controls. It moves in proportion by control. [horizontal, vertical]
roundClickable optional
Default Value: true
roundClickable?: boolean | "line" | "control"
Whether you can add/delete round controls by double-clicking a line or control.
isDisplayShadowRoundControls optional
Default Value: false
isDisplayShadowRoundControls?: boolean | "horizontal"
Whether to show a round control that does not actually exist as a shadow
roundPadding optional
Default Value: 0
roundPadding?: number
The padding value of the position of the round control
clippable optional
Default Value: false
clippable?: boolean | ClippableOptions
Whether to clip the target.
keepRatio optional
Default Value: false
keepRatio?: boolean
Whether to keep the ratio of size if your clipPath is 'inset', 'rect', 'ellipse' type
customClipPath optional
customClipPath?: string
You can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)
defaultClipPath optional
defaultClipPath?: string
If clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)
clipRelative optional
Default Value: false
clipRelative?: boolean
% Can be used instead of the absolute px (`rect` not possible)
dragWithClip optional
Default Value: true
dragWithClip?: boolean
When dragging the target, the clip also moves.
clipArea optional
Default Value: false
clipArea?: boolean
You can drag the clip by setting clipArea.
clipTargetBounds optional
Default Value: false
clipTargetBounds?: boolean
Whether the clip is bound to the target.
clipVerticalGuidelines optional
Default Value: []
clipVerticalGuidelines?: Array<string | number>
Add clip guidelines in the vertical direction.
clipHorizontalGuidelines optional
Default Value: []
clipHorizontalGuidelines?: Array<string | number>
Add clip guidelines in the horizontal direction.
clipSnapThreshold optional
Default Value: 5
clipSnapThreshold?: number
Distance value that can snap to clip guidelines.
scrollable optional
Default Value: false
scrollable?: boolean
Whether or not target can be scrolled to the scroll container
scrollContainer optional
Default Value: container
scrollContainer?: MoveableRefType<HTMLElement>
The container to which scroll is applied
scrollThreshold optional
Default Value: 0
scrollThreshold?: number
Expand the range of the scroll check area.
scrollThrottleTime optional
Default Value: 0
scrollThrottleTime?: number
Time interval that occurs when scrolling occurs when dragging is maintained If set to 0, it does not occur.
getScrollPosition optional
Default Value: scrollContainer's scrollTop, scrollLeft
getScrollPosition?: (e: {scrollContainer: HTMLElement, direction: number[]}) => number[]
Sets a function to get the scroll position.
scrollOptions optional
Since: 0.43.0
Story Example: support-scroll--scrolling-scrollable
scrollOptions?: Partial<DragScrollOptions> | null
Option to scroll with dragging
Examples 
const scrollOptions = {
    container: () => viewer.getContainer(),
    threshold: 20,
    getScrollPosition: () => {
        return [
            viewer.getScrollLeft({ absolute: true }),
            viewer.getScrollTop({ absolute: true }),
        ];
    },
};
originDraggable optional
Default Value: false
originDraggable?: boolean
Whether to drag origin.
originRelative optional
Default Value: true
originRelative?: boolean
% Can be used instead of the absolute px.
defaultGroupRotate optional
Default Value: 0
defaultGroupRotate?: number
Sets the initial rotation of the group.
useDefaultGroupRotate optional
Default Value: false
useDefaultGroupRotate?: boolean
Use the defaultGroupRotate even if the children's rotations match.
defaultGroupOrigin optional
Default Value: "50% 50%"
defaultGroupOrigin?: string
Sets the initial transform origin of the group.
targetGroups optional
targetGroups?: MoveableTargetGroupsType
hideChildMoveableDefaultLines optional
Default Value: false
hideChildMoveableDefaultLines?: boolean
Whether to hide the line in child moveable for group corresponding to the rect of the target.
groupableProps optional
groupableProps?: Record<string, any>
Props that work when group
Examples 
```js
{
    roundable: true,
    groupableProps: {
        roundable: false,
    },
}
```
pinchable optional
Default Value: false
pinchable?: boolean | Array<"rotatable" | "resizable" | "scalable">
Whether or not target can be pinched with draggable, resizable, scalable, rotatable.
renderDirections optional
Default Value: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
renderDirections?: boolean | string[]
Set directions to show the control box.
edge optional
Default Value: false
edge?: boolean | Array<LineDirection>
Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.
displayAroundControls optional
Since: 0.44.0
Story Example: options--options-control-padding
Default Value: false
displayAroundControls?: boolean
You can expand the area around the control. Either `rotateAroundControls` or `displayAroundControls` can be used. You can set the area through the `controlPadding` value.
warpable optional
Default Value: false
warpable?: boolean
Whether or not target can be warped.
renderDirections optional
Default Value: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
renderDirections?: boolean | string[]
Set directions to show the control box.
edge optional
Default Value: false
edge?: boolean | Array<LineDirection>
Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.
displayAroundControls optional
Since: 0.44.0
Story Example: options--options-control-padding
Default Value: false
displayAroundControls?: boolean
You can expand the area around the control. Either `rotateAroundControls` or `displayAroundControls` can be used. You can set the area through the `controlPadding` value.
rotatable optional
Default Value: false
rotatable?: boolean | RotatableOptions
Whether or not target can be rotated.
rotationPosition optional
Default Value: "top"
rotationPosition?: RotationPosition | RotationPosition[]
You can specify the position of the rotation.
rotateAroundControls optional
Default Value: 0
rotateAroundControls?: boolean
You can rotate around direction controls. Either `rotateAroundControls` or `displayAroundControls` can be used.
resolveAblesWithRotatable optional
Default Value: null
resolveAblesWithRotatable?: Record<string, LineDirection[]> | null | undefined
Sets the control that will cause resize along with rotate. (Only Single Target, Only resizable, Beta)
throttleRotate optional
Default Value: 0
throttleRotate?: number
throttle of angle(degree) when rotate.
rotationTarget optional
Default Value: null
rotationTarget?: MoveableRefType | ArrayFormat<MoveableRefType> | false
Set additional rotationTargets.
renderDirections optional
Default Value: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
renderDirections?: boolean | string[]
Set directions to show the control box.
edge optional
Default Value: false
edge?: boolean | Array<LineDirection>
Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.
displayAroundControls optional
Since: 0.44.0
Story Example: options--options-control-padding
Default Value: false
displayAroundControls?: boolean
You can expand the area around the control. Either `rotateAroundControls` or `displayAroundControls` can be used. You can set the area through the `controlPadding` value.
scalable optional
Default Value: false
scalable?: boolean | ScalableOptions
Whether or not target can be scaled.
throttleScale optional
Default Value: 0
throttleScale?: number
throttle of scaleX, scaleY when scale.
keepRatio optional
Default Value: false
keepRatio?: boolean
When resize or scale, keeps a ratio of the width, height.
edge optional
Default Value: false
edge?: boolean | Array<LineDirection>
Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.
renderDirections optional
Default Value: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
renderDirections?: boolean | string[]
Set directions to show the control box.
edge optional
Default Value: false
edge?: boolean | Array<LineDirection>
Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.
displayAroundControls optional
Since: 0.44.0
Story Example: options--options-control-padding
Default Value: false
displayAroundControls?: boolean
You can expand the area around the control. Either `rotateAroundControls` or `displayAroundControls` can be used. You can set the area through the `controlPadding` value.
resizable optional
Default Value: false
resizable?: boolean | ResizableOptions
Whether or not target can be resized.
throttleResize optional
Default Value: 1
throttleResize?: number
throttle of width, height when resize.
keepRatio optional
Default Value: false
keepRatio?: boolean
When resize or scale, keeps a ratio of the width, height.
keepRatioFinally optional
Default Value: false
keepRatioFinally?: boolean
The size can be changed by format and throttle, but the ratio is maintained at the end. Forced true when using groups.
resizeFormat optional
Default Value: oneself
resizeFormat?: (size: number[]) => number[]
Function to convert size for resize.
edge optional
Default Value: false
edge?: boolean | Array<LineDirection>
Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.
checkResizableError optional
Default Value: true
checkResizableError?: boolean
Whether to recalculate when the size to be calculated is different from the actual size
draggable optional
Default Value: false
draggable?: boolean
Whether or not target can be dragged.
throttleDrag optional
Default Value: 0
throttleDrag?: number
throttle of x, y when drag.
throttleDragRotate optional
Default Value: 0
throttleDragRotate?: number
throttle of angle(degree) of x,y when drag.
hideThrottleDragRotateLine optional
Default Value: false
hideThrottleDragRotateLine?: boolean
Hides the guidelines that appear when using the `throttleDragRotate` prop.
startDragRotate optional
Default Value: 0
startDragRotate?: number
start angle(degree) of x,y for throttleDragRotate when drag.
edgeDraggable optional
Default Value: false
edgeDraggable?: boolean | Array<LineDirection>
Whether to move by dragging the edge line
onChangeTargets optional
onChangeTargets?: (e: OnChangeTargets) => void
Type:
  • TSInterface

MoveablePosition

Source:
Properties:
left
left: number
top
top: number
right
right: number
bottom
bottom: number
origin
origin: number[]
pos1
pos1: number[]
pos2
pos2: number[]
pos3
pos3: number[]
pos4
pos4: number[]
direction
direction: 1 | -1
Type:
  • TSInterface

MoveableRefObject<T extends Element = HTMLElement | SVGElement>

Source:
Properties:
current
current: T | undefined | null
Type:
  • TSInterface

MoveableRefTargetType

Source:
Type:

MoveableRefType<T extends Element = HTMLElement | SVGElement>

Source:
Type:

MoveableTargetGroupsType

Source:
Type:

OnBeforeRender

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
isPinch
isPinch: boolean
Whether or not it is being pinched.
`beforeRender` event occurs before the dragging of all events.
Type:
  • TSInterface

OnBeforeRenderEnd

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
isPinch
isPinch: boolean
Whether or not it is being dragged.
isDrag
isDrag: boolean
Whether or not it is being pinched.
`beforeRenderEnd` event occurs before the end of all events.
Type:
  • TSInterface

OnBeforeRenderGroup

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
isPinch
isPinch: boolean
Whether or not it is being pinched.
targets
targets: Array<HTMLElement | SVGElement>
targets set to group.
events
events: OnBeforeRender[]
children's `beforeRender` events
Type:
  • TSInterface

OnBeforeRenderGroupEnd

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

OnBeforeRenderGroupStart

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
isPinch
isPinch: boolean
Whether or not it is being pinched.
setTransform
setTransform: (transform: string | string[]) => any
Set your original transform.
targets
targets: Array<HTMLElement | SVGElement>
targets set to group.
events
events: OnBeforeRenderStart[]
children's `beforeRenderStart` events
Type:
  • TSInterface

OnBeforeRenderStart

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
isPinch
isPinch: boolean
Whether or not it is being pinched.
setTransform
setTransform: (transform: string | string[]) => any
Set your original transform.
`beforeRenderStart` event occurs before the first start of all events.
Type:
  • TSInterface

OnChangeTargets

Source:
Properties:
moveable
moveable: MoveableManagerInterface<any, any>
The Moveable instance
targets
targets: Array<HTMLElement | SVGElement>
The Moveable's targets
Type:
  • TSInterface

OnClick

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

OnClickGroup

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

OnEndEvent

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

OnEvent

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

OnRender

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
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
transform
transform: string
a target's next transform string value.
isPinch
isPinch: boolean
Whether or not it is being pinched.
transformObject
transformObject: Record<string, any>
Return transform as a transform object. `rotate` is a number and everything else is an array of numbers.
`render` event occurs before the target is drawn on the screen.
Type:
  • TSInterface

OnRenderEnd

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
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
transform
transform: string
a target's next transform string value.
isPinch
isPinch: boolean
Whether or not it is being dragged.
isDrag
isDrag: boolean
Whether or not it is being pinched.
transformObject
transformObject: Record<string, any>
Return transform as a transform object. `rotate` is a number and everything else is an array of numbers.
`renderEnd` event occurs at the end of all events.
Type:
  • TSInterface

OnRenderGroup

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
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
transform
transform: string
a target's next transform string value.
isPinch
isPinch: boolean
Whether or not it is being pinched.
transformObject
transformObject: Record<string, any>
Return transform as a transform object. `rotate` is a number and everything else is an array of numbers.
targets
targets: Array<HTMLElement | SVGElement>
targets set to group.
events
events: OnRender[]
Each `render` event on the targets
Type:
  • TSInterface

OnRenderGroupEnd

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
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
transform
transform: string
a target's next transform string value.
isPinch
isPinch: boolean
Whether or not it is being dragged.
isDrag
isDrag: boolean
Whether or not it is being pinched.
transformObject
transformObject: Record<string, any>
Return transform as a transform object. `rotate` is a number and everything else is an array of numbers.
targets
targets: Array<HTMLElement | SVGElement>
targets set to group.
events
events: OnRenderEnd[]
Each `renderEnd` event on the targets
Type:
  • TSInterface

OnRenderGroupStart

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

OnRenderStart

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
isPinch
isPinch: boolean
Whether or not it is being pinched.
`renderStart` event occurs at the first start of all events.
Type:
  • TSInterface

OnTransformEvent

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
transform
transform: string
a target's next transform string value.
afterTransform
afterTransform: string
A transform obtained by the simultaneous occurrence of other events in the current event
drag
drag: OnDrag
transform events causes a `drag` event. In some events, there may be no value.
Type:
  • TSInterface

OnTransformStartEvent

Source:
Properties:
setTransform
Default Value: transform of target's inline style
setTransform: (transform: string | string[], transformIndex?: number) => void
Set your original transform. `transformIndex` is the sequence of functions used in the event. If you use `setTransform`, you don't need to use `set` function.
setTransformIndex
Default Value: index with that property in transform or last
setTransformIndex: (transformIndex: number) => void
`transformIndex` is the sequence of functions used in the event.
Type:
  • TSInterface

OriginOptions

Source:
Properties:
origin optional
Default Value: true
origin?: boolean
Whether or not the origin control box will be visible or not.
svgOrigin optional
Since: 0.47.0
Default Value: ""
svgOrigin?: string
Sets the transform origin based on the svg target. If not set, it is set as the transform origin based on the owner of svg.
Type:
  • TSInterface

PaddingBox

Source:
Properties:
left optional
left?: number
left padding
top optional
top?: number
top padding
right optional
right?: number
right padding
bottom optional
bottom?: number
bottom padding
Type:
  • TSInterface

PaddingOptions

Source:
Properties:
padding optional
Default Value: null
padding?: PaddingBox | number
Add padding around the target to increase the drag area.
Type:
  • TSInterface

PersistRectData

Source:
Type:

RectInfo

Source:
Properties:
pos1
pos1: number[]
The coordinates of the vertex 1
pos2
pos2: number[]
The coordinates of the vertex 2
pos3
pos3: number[]
The coordinates of the vertex 3
pos4
pos4: number[]
The coordinates of the vertex 4
left
left: number
left position of the target relative to the container
top
top: number
top position of the target relative to the container
width
width: number
The width of moveable element
height
height: number
The height of moveable element
offsetWidth
offsetWidth: number
The offset width of the target
offsetHeight
offsetHeight: number
The offset height of the target
origin
origin: number[]
The absolute transform origin
beforeOrigin
beforeOrigin: number[]
The absolute transform origin before transformation
transformOrigin
transformOrigin: number[]
The target transform origin
rotation
rotation: number
you can get the absolute rotation value
children optional
children?: RectInfo[]
If you use a group, you can get child moveables' rect info
Type:
  • TSInterface

RenderDirections

Source:
Properties:
renderDirections optional
Default Value: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
renderDirections?: boolean | string[]
Set directions to show the control box.
edge optional
Default Value: false
edge?: boolean | Array<LineDirection>
Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.
displayAroundControls optional
Since: 0.44.0
Story Example: options--options-control-padding
Default Value: false
displayAroundControls?: boolean
You can expand the area around the control. Either `rotateAroundControls` or `displayAroundControls` can be used. You can set the area through the `controlPadding` value.
Type:
  • TSInterface

Requester<RequestParam = AbleRequestParam>

Source:
See:
Properties:
request
request: (param: RequestParam) => this
Continue executing the request.
requestEnd
requestEnd: () => this
End the request.
Type:
  • TSInterface

TransformObject

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
transform
transform: string
a target's next transform string value.
afterTransform
afterTransform: string
A transform obtained by the simultaneous occurrence of other events in the current event
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);
});

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