Whether to drag origin (default: false)
Members
originRelative
% 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;originDraggable
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);
});Methods
request(e, e.xopt, e.yopt, e.deltaXopt, e.deltaYopt, e.deltaOriginopt, e.originopt, e.isInstantopt) → {Moveable.Requester}
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
e |
object | the OriginDraggable's request parameter
Properties
|
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
Properties:
currentTarget:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
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.
afterTransform:
string
A transform obtained by the simultaneous occurrence of other events in the current event
Type:
- TSInterface
OnDragOriginEnd
Properties:
currentTarget:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
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.
Type:
- TSInterface
OnDragOriginStart
Properties:
currentTarget:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
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.
Type:
- TSInterface
OriginDraggableOptions
Properties:
originRelative
optional
Default Value: true
originRelative?:
boolean
% Can be used instead of the absolute px.
Type:
- TSInterface
Events
dragOrigin
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
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
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);
});