Draggable refers to the ability to drag and move targets.
Members
throttleDragRotate
throttle of angle of x, y when drag.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
moveable.throttleDragRotate = 45;throttleDrag
- Source:
- Default Value:
- 0
throttle of x, y when drag.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
moveable.throttleDrag = 1;startDragRotate
start angle of throttleDragRotate of x, y when drag.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
// 45, 135, 225, 315
moveable.throttleDragRotate = 90;
moveable.startDragRotate = 45;edgeDraggable
Whether to move by dragging the edge line (default: false)
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
draggable: true,
edgeDraggable: false,
});
moveable.edgeDraggable = true;draggable
Whether or not target can be dragged. (default: false)
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
moveable.draggable = true;Methods
request(eopt, e.xopt, e.yopt, e.deltaXopt, e.deltaYopt) → {Moveable.Requester}
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
e? |
object | the draggable's request parameter
Properties
|
Example
// Instantly Request (requestStart - request - requestEnd)
// Use Relative Value
moveable.request("draggable", { deltaX: 10, deltaY: 10 }, true);
// Use Absolute Value
moveable.request("draggable", { x: 200, y: 100 }, true);
// requestStart
const requester = moveable.request("draggable");
// 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("draggable", { x: 200, y: 100 });
moveable.request("draggable", { x: 220, y: 100 });
moveable.request("draggable", { x: 240, y: 100 });
// requestEnd
requester.requestEnd();Returns:
Moveable Requester
- Type
- Moveable.Requester
Type Definitions
DraggableOptions
Properties:
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
Type:
- TSInterface
DraggableRequestParam
Properties:
isInstant
optional
isInstant?:
boolean
Run the request instantly. (requestStart, request, requestEnd happen at the same time)
the Draggable's request parameter
Type:
- TSInterface
OnDrag
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
OnDragEnd
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
OnDragGroup
Properties:
Type:
- TSInterface
OnDragGroupEnd
Properties:
Type:
- TSInterface
OnDragGroupStart
Properties:
Type:
- TSInterface
OnDragStart
Properties:
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.
Default Value: index with that property in transform or last
setTransformIndex:
(transformIndex: number) => void
`transformIndex` is the sequence of functions used in the event.
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.
When the drag starts, the dragStart event is called.
Type:
- TSInterface
Events
drag
When dragging, the drag event is called.
| Type | Description |
|---|---|
| Moveable.Draggable.OnDrag | Parameters for the drag event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { draggable: true });
moveable.on("drag", ({ target, transform }) => {
target.style.transform = transform;
});dragEnd
When the drag finishes, the dragEnd event is called.
| Type | Description |
|---|---|
| Moveable.Draggable.OnDragEnd | Parameters for the dragEnd event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { draggable: true });
moveable.on("dragEnd", ({ target, isDrag }) => {
console.log(target, isDrag);
});dragGroup
When the group drag, the `dragGroup` event is called.
| Type | Description |
|---|---|
| Moveable.Draggable.OnDragGroup | Parameters for the `dragGroup` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
draggable: true
});
moveable.on("dragGroup", ({ targets, events }) => {
console.log("onDragGroup", targets);
events.forEach(ev => {
// drag event
console.log("onDrag left, top", ev.left, ev.top);
// ev.target!.style.left = `${ev.left}px`;
// ev.target!.style.top = `${ev.top}px`;
console.log("onDrag translate", ev.dist);
ev.target!.style.transform = ev.transform;)
});
});dragGroupEnd
When the group drag finishes, the `dragGroupEnd` event is called.
| Type | Description |
|---|---|
| Moveable.Draggable.OnDragGroupEnd | Parameters for the `dragGroupEnd` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
draggable: true
});
moveable.on("dragGroupEnd", ({ targets, isDrag }) => {
console.log("onDragGroupEnd", targets, isDrag);
});dragGroupStart
When the group drag starts, the `dragGroupStart` event is called.
| Type | Description |
|---|---|
| Moveable.Draggable.OnDragGroupStart | Parameters for the `dragGroupStart` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
draggable: true
});
moveable.on("dragGroupStart", ({ targets }) => {
console.log("onDragGroupStart", targets);
});dragStart
When the drag starts, the dragStart event is called.
| Type | Description |
|---|---|
| Moveable.Draggable.OnDragStart | Parameters for the dragStart event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { draggable: true });
moveable.on("dragStart", ({ target }) => {
console.log(target);
});