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

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

Members

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

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

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;

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

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

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

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)

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

updateTarget(typeopt)

Source:
If the width, height, left, and top of the only target change, update the shape of the moveable.
Name Type Description
type? "Start" | "" | "End"
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.updateTarget();

Type Definitions

Able<Props extends IObject<any> = IObject<any>, Events extends IObject<any> = IObject<any>>

Source:
Properties:
Name Type Description
name string
props? [key extends keyof Props]: any
events? [key extends keyof Events]: string
always? boolean
ableGroup? string
updateRect? boolean
canPinch? boolean
css? string[]
unset? (moveable: any) => any
render? (moveable: any, renderer: Renderer) => any
dragStart? (moveable: any, e: GestoTypes.OnDragStart) => any
drag? (moveable: any, e: GestoTypes.OnDrag) => any
dragEnd? (moveable: any, e: GestoTypes.OnDragEnd) => any
pinchStart? (moveable: any, e: GestoTypes.OnPinchStart) => any
pinch? (moveable: any, e: GestoTypes.OnPinch) => any
pinchEnd? (moveable: any, e: GestoTypes.OnPinchEnd) => any
dragControlCondition? (moveable: any, e: any) => boolean
dragControlStart? (moveable: any, e: GestoTypes.OnDragStart) => any
dragControl? (moveable: any, e: GestoTypes.OnDrag) => any
dragControlEnd? (moveable: any, e: GestoTypes.OnDragEnd) => any
dragGroupCondition? (moveable: any, e: any) => boolean
dragGroupStart? (moveable: any, e: GestoTypes.OnDragStart) => any
dragGroup? (moveable: any, e: GestoTypes.OnDrag) => any
dragGroupEnd? (moveable: any, e: GestoTypes.OnDragEnd) => any
pinchGroupStart? (moveable: any, e: GestoTypes.OnPinchStart) => any
pinchGroup? (moveable: any, e: GestoTypes.OnPinch) => any
pinchGroupEnd? (moveable: any, e: GestoTypes.OnPinchEnd) => any
dragGroupControlCondition? (moveable: any, e: any) => boolean
dragGroupControlStart? (moveable: any, e: GestoTypes.OnDragStart) => any
dragGroupControl? (moveable: any, e: GestoTypes.OnDragStart) => any
dragGroupControlEnd? (moveable: any, e: GestoTypes.OnDragEnd) => any
mouseEnter? (moveable: any, e: any) => any
mouseLeave? (moveable: any, e: any) => any
mouseGroupEnter? (moveable: any, e: any) => any
mouseGroupLeave? (moveable: any, e: any) => any
request? (moveable: any) => AbleRequester
Type:
  • TSInterface

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

DefaultOptions

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. Don't set it. (default: parentElement)
portalContainer? HTMLElement | null Moveable Portal Container to support other frameworks. Don't set it. (default: container)
rootContainer? HTMLElement | null Moveable Root Container (No Transformed Container). (default: container)
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)
checkInput? boolean Checks whether this is an element to input text or contentEditable, and prevents dragging. (default: false)
cspNonce? string add nonce property to style for CSP (default: "")
translateZ? number | string You can set the translateZ value of moveable (default: 50)
props? Record<string, any> You can use props in object format or custom props. (default: object)
Type:
  • TSInterface

DragAreaOptions

Source:
Properties:
Name Type Description
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. (default: if group, true, else false)
passDragArea? boolean Set `pointerEvents: none;` css to pass events in dragArea.
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

MoveableDefaultProps

Source:
Properties:
Name Type Description
target? MoveableRefType | ArrayFormat<MoveableRefType>
Type:
  • TSInterface

MoveableOptions

Source:
Properties:
Name Type Description
roundable? boolean Whether to show and drag border-radius
roundRelative? boolean % Can be used instead of the absolute px
minRoundControls? number[] Minimum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [0, 0])
maxRoundControls? number[] Maximum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [4, 4])
roundClickable? boolean Whether you can add/delete round controls by double-clicking a line or control. (default: true)
originDraggable? boolean * Whether to drag origin (default: false)
originRelative? boolean % Can be used instead of the absolute px (default: true)
clippable? boolean Whether to clip the target.
customClipPath? string You can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)
defaultClipPath? string If clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)
clipRelative? boolean % Can be used instead of the absolute px (`rect` not possible) (default: false)
dragWithClip? boolean When dragging the target, the clip also moves. (default: true)
clipArea? boolean You can drag the clip by setting clipArea. (default: false)
clipTargetBounds? boolean Whether the clip is bound to the target. (default: false)
clipVerticalGuidelines? Array<string | number> Add clip guidelines in the vertical direction. (default: [])
clipHorizontalGuidelines? Array<string | number> Add clip guidelines in the horizontal direction. (default: [])
clipSnapThreshold? number Distance value that can snap to clip guidelines. (default: 5)
defaultGroupRotate? number Sets the initial rotation of the group. (default 0)
defaultGroupOrigin? string Sets the initial transform origin of the group. (default "50% 50%")
groupable? boolean
scrollable? boolean Whether or not target can be scrolled to the scroll container (default: false)
scrollContainer? MoveableRefType<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)
pinchable? boolean | Array<"rotatable" | "resizable" | "scalable"> Whether or not target can be pinched with draggable, resizable, scalable, rotatable. (default: false)
warpable? boolean Whether or not target can be warped. (default: false)
renderDirections? boolean | string[] Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
renderDirections? boolean | string[] Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
rotatable? boolean Whether or not target can be rotated. (default: false)
rotationPosition? "top" | "bottom" | "left" | "right" | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "left-top" | "left-bottom" | "right-top" | "right-bottom" | "none" You can specify the position of the rotation. (default: "top")
throttleRotate? number throttle of angle(degree) when rotate. (default: 0)
rotationTarget? MoveableRefType | ArrayFormat<MoveableRefType> | false Set additional rotationTargets.
renderDirections? boolean | string[] Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
scalable? boolean Whether or not target can be scaled. (default: false)
throttleScale? number throttle of scaleX, scaleY when scale. (default: 0)
keepRatio? boolean When resize or scale, keeps a ratio of the width, height. (default: false)
renderDirections? boolean | string[] Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
resizable? boolean Whether or not target can be resized. (default: false)
throttleResize? number throttle of width, height when resize. (default: 0)
keepRatio? boolean When resize or scale, keeps a ratio of the width, height. (default: false)
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)
startDragRotate? number start angle(degree) of x,y for throttleDragRotate when drag. (default: 0)
edgeDraggable? boolean Whether to move by dragging the edge line
target? MoveableRefType | ArrayFormat<MoveableRefType>
Type:
  • TSInterface

OnBeforeRender

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnBeforeRenderEnd

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
isPinch boolean Whether or not it is being dragged.
isDrag boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnBeforeRenderGroup

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
isPinch boolean Whether or not it is being pinched.
targets Array<HTMLElement | SVGElement> targets set to group.
events OnBeforeRender[] children's `beforeRender` events
Type:
  • TSInterface

OnBeforeRenderGroupEnd

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
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

OnBeforeRenderGroupStart

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
isPinch boolean Whether or not it is being pinched.
setTransform (transform: string | string[]) => any Set your original transform.
targets Array<HTMLElement | SVGElement> targets set to group.
events OnBeforeRenderStart[] children's `beforeRenderStart` events
Type:
  • TSInterface

OnBeforeRenderStart

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
isPinch boolean Whether or not it is being pinched.
setTransform (transform: string | string[]) => any Set your original transform.
Type:
  • TSInterface

OnClick

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
inputTarget Element 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 MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
targets Element[] targets set to group.
inputTarget Element 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

OnEndEvent

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

OnEvent

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
Type:
  • TSInterface

OnRender

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnRenderEnd

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
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 MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
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 MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
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 MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
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 MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnTransformEvent

Source:
Properties:
Name Type Description
transform string a target's next transform string value.
drag OnDrag transform events causes a `drag` event.
Type:
  • TSInterface

OnTransformStartEvent

Source:
Properties:
Name Type Description
setTransform (transform: string | string[], index?: number) => void Set your original transform. `index` is the sequence of functions used in the event. If you use `setTransform`, you don't need to use `set` function.
setTransformIndex (transformIndex: number) => void `index` is the sequence of functions used in the event.
Type:
  • TSInterface

OriginOptions

Source:
Properties:
Name Type Description
origin? boolean Whether or not the origin control box will be visible or not (default: true)
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

PaddingOptions

Source:
Properties:
Name Type Description
padding? PaddingBox Add padding around the target to increase the drag area. (default: null)
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
transformOrigin number[] The target transform origin
rotation number you can get the absolute rotation value
children? RectInfo[] If you use a group, you can get child moveables' rect info
Type:
  • TSInterface

RenderDirections

Source:
Properties:
Name Type Description
renderDirections? boolean | string[] Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
Type:
  • TSInterface

Requester

Source:
See:
Properties:
Name Type Description
request (param: IObject<any>) => this Continue executing the request.
requestEnd () => this End the request.
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);
});