OriginDraggable

Moveable. OriginDraggable

Source:
Whether to drag origin (default: false)

Members

originDraggable

Source:
Whether to drag origin (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    originDraggable: true,
});
let translate = [0, 0];
moveable.on("dragOriginStart", e => {
    e.dragStart && e.dragStart.set(translate);
}).on("dragOrigin", e => {
    translate = e.drag.beforeTranslate;
    e.target.style.cssText
        = `transform-origin: ${e.transformOrigin};`
        + `transform: translate(${translate[0]}px, ${translate[1]}px)`;
}).on("dragOriginEnd", e => {
    console.log(e);
});

originRelative

Source:
% Can be used instead of the absolute px (default: true)
Example
import Moveable from "moveable";

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

Methods

request(e, e.xopt, e.yopt, e.deltaXopt, e.deltaYopt, e.deltaOriginopt, e.originopt, e.isInstantopt) → {Moveable.Requester}

Source:
Name Type Description
e object the OriginDraggable's request parameter
Properties
Name Type Description
x? number x position
y? number y position
deltaX? number x number to move
deltaY? number y number to move
deltaOrigin? array left, top number to move transform-origin
origin? array transform-origin position
isInstant? number Whether to execute the request instantly
Example
// Instantly Request (requestStart - request - requestEnd)
// Use Relative Value
moveable.request("originDraggable", { deltaX: 10, deltaY: 10 }, true);
// Use Absolute Value
moveable.request("originDraggable", { x: 200, y: 100 }, true);
// Use Transform Value
moveable.request("originDraggable", { deltaOrigin: [10, 0] }, true);
moveable.request("originDraggable", { origin: [100, 0] }, true);
// requestStart
const requester = moveable.request("originDraggable");

// request
// Use Relative Value
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
// Use Absolute Value
moveable.request("originDraggable", { x: 200, y: 100 });
moveable.request("originDraggable", { x: 220, y: 100 });
moveable.request("originDraggable", { x: 240, y: 100 });

// requestEnd
requester.requestEnd();
Returns:
Moveable Requester
Type
Moveable.Requester

Type Definitions

OnDragOrigin

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
width number Offset width of target
height number Offset height of target
delta number[] The delta of [x, y]
dist number[] The distance of [x, y]
origin number[] The target's moved transform-origin poses
transformOrigin string The target's moved transform-origin css
drag OnDrag `dragOrigin` causes a `drag` event.
Type:
  • TSInterface

OnDragOriginEnd

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

OnDragOriginStart

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
dragStart OnDragStart | false dragOrigin causes a `dragStart` event.
Type:
  • TSInterface

OriginDraggableOptions

Source:
Properties:
Name Type Description
originDraggable? boolean * Whether to drag origin (default: false)
originRelative? boolean % Can be used instead of the absolute px (default: true)
Type:
  • TSInterface

Events

dragOrigin

Source:
When drag the origin, the `dragOrigin` event is called.
Type Description
Moveable.OriginDraggable.OnDragOrigin Parameters for the `dragOrigin` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    originDraggable: true,
});
let translate = [0, 0];
moveable.on("dragOriginStart", e => {
    e.dragStart && e.dragStart.set(translate);
}).on("dragOrigin", e => {
    translate = e.drag.beforeTranslate;
    e.target.style.cssText
        = `transform-origin: ${e.transformOrigin};`
        + `transform: translate(${translate[0]}px, ${translate[1]}px)`;
}).on("dragOriginEnd", e => {
    console.log(e);
});

dragOriginEnd

Source:
When drag end the origin, the `dragOriginEnd` event is called.
Type Description
Moveable.OriginDraggable.OnDragOriginEnd Parameters for the `dragOriginEnd` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    originDraggable: true,
});
let translate = [0, 0];
moveable.on("dragOriginStart", e => {
    e.dragStart && e.dragStart.set(translate);
}).on("dragOrigin", e => {
    translate = e.drag.beforeTranslate;
    e.target.style.cssText
        = `transform-origin: ${e.transformOrigin};`
        + `transform: translate(${translate[0]}px, ${translate[1]}px)`;
}).on("dragOriginEnd", e => {
    console.log(e);
});

dragOriginStart

Source:
When drag start the origin, the `dragOriginStart` event is called.
Type Description
Moveable.OriginDraggable.OnDragOriginStart Parameters for the `dragOriginStart` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    originDraggable: true,
});
let translate = [0, 0];
moveable.on("dragOriginStart", e => {
    e.dragStart && e.dragStart.set(translate);
}).on("dragOrigin", e => {
    translate = e.drag.beforeTranslate;
    e.target.style.cssText
        = `transform-origin: ${e.transformOrigin};`
        + `transform: translate(${translate[0]}px, ${translate[1]}px)`;
}).on("dragOriginEnd", e => {
    console.log(e);
});