Draggable

Moveable. Draggable

Source:
Draggable refers to the ability to drag and move targets.

Members

draggable

Source:
Whether or not target can be dragged. (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.draggable = true;

edgeDraggable

Source:
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;

startDragRotate

Source:
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;

throttleDrag

Source:
throttle of x, y when drag.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleDrag = 1;

throttleDragRotate

Source:
throttle of angle of x, y when drag.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleDragRotate = 45;

Methods

request(eopt, e.xopt, e.yopt, e.deltaXopt, e.deltaYopt) → {Moveable.Requester}

Source:
Name Type Description
e? object the draggable'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
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

Source:
Properties:
Name Type Description
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
Type:
  • TSInterface

OnDrag

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
beforeDelta number[] The delta of [left, top]
beforeDist number[] The distance of [left, top]
beforeTranslate number[] The position of [left, top]
delta number[] The delta of [translateX, translateY]
dist number[] The distance of [translateX, translateY]
translate number[] The position of [translateX, translateY]
transform string a target's transform
left number a target's left
top number a target's top
bottom number a target's bottom
width number a target's right
height number a target's offset width
right number a target's offset height
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnDragEnd

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

OnDragGroup

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> The dragging targets
events OnDrag[] Each `drag` event on the targets
Type:
  • TSInterface

OnDragGroupEnd

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> The drag finished targets
Type:
  • TSInterface

OnDragGroupStart

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> targets to drag
events OnDragStart[] Each `dragStart` event on the targets
Type:
  • TSInterface

OnDragStart

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.
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
set (translate: number[]) => void You can set the start translate value.
Type:
  • TSInterface

Events

drag

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

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

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

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

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

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