Drag

MMO.inputs · 1 symbol · generated 30 Sep 2026

class

Drag

Drag gesture Options: - button: the button type to use when starting to drag (MMO.inputs.BUT_LEFT| MMO.inputs.BUT_WHEEL| MMO.inputs.BUT_RIGHT) - ghost: a selector or an HTMLElement that is used to show the user the changes - docks: a selector or a list of HTMLElement that can served as dock for the element - target: a selecor or an HTMLElement that is the target of the changes. Use input.node by default - mode: - none: only gesture.current is updated - rotate: not implemented - size: resize width and height - resize: alias of size - size-width: resize width - size-left: resize width by the left - size-height: resize height - size-top: resize height by the top - move-x: move left - move-y: move top - move: move left and top - min: {x: .., width: ..} - max: {x: .., height: ..}

class MMO.inputs.Drag extends MMO.inputs.Gesture

Namespace: MMO.inputs
Extends: Gesture

Events called on the element with event.detail = this: - drag-over: on a dock, when the element is beeing dragged over - drag-over-start: on a dock, when the element enters the dock - drag-over-stop: on a dock, when the element leaves the dock

Index

	constructor(input, name, opts)
	getNodeRect(node)	The rectangle being dragged, expressed in another node's coordinate system.
	getNodePt(node)	The pointer's current position, expressed in another node's coordinate system.
	setGhost(node)
	setDock(dock)	Set the node dock
	setDocks(docks)	Declare the nodes the dragged element can be dropped onto.
	getMode()
	setMode(mode)	Choose what dragging actually changes.
	start()
	update(e)	Override: drive the drag state machine.
	stop()	Override: hide the ghost and fire `drop` and `drag-over-stop` on the dock, if any.
	findDockAt(x, y)	Find the dock at the given point
	relativePosition(addOffset)	The dragged element's position relative to its offset parent, i.e.
	ptRelative(x, y)	Convert an absolute point into the dragged element's own coordinate system.
	setPosition(pos, relative)	Move the drag to a position, updating the ghost.
	setSize(rect)	Resize the drag, updating the ghost.
	applyDock(dock)	Insert the dragged element as the correct child of dock
	applyPosition(node)	Write the pending position to a node's inline style.
	applySize(node)	Write the pending size to a node's inline style, `min-width`/`min-height` included so a flex or grid parent cannot shrink it back.
	cleanCSS()	Restore the inline styles the target had before the drag started.

Methods20

constructor(input, name, opts)

Drag.js:33

constructor(input, name, opts)

input
name
opts

getNodeRect(node)

Drag.js:78

The rectangle being dragged, expressed in another node's coordinate system.

getNodeRect(node)

node	`Element`	the node to express the rectangle relative to
returns	`x: number, y: number, width: number, height: number`	}

getNodePt(node)

Drag.js:92

The pointer's current position, expressed in another node's coordinate system.

getNodePt(node)

node	`Element`	the node to express the point relative to
returns	`x: number, y: number`	}

setGhost(node)

Drag.js:102

setGhost(node)

node

setDock(dock)

Drag.js:121

Set the node dock

setDock(dock)

dock	`Element` \| `null`
returns	`Boolean`	true if dock is different

setDocks(docks)

Drag.js:148

Declare the nodes the dragged element can be dropped onto.

setDocks(docks)

docks string | Array<Element> | NodeList a css selector, or the nodes themselves

getMode()

Drag.js:155

getMode()

returns string the current mode's name, 'unknown' for a combination without one

setMode(mode)

Drag.js:177

Choose what dragging actually changes.

setMode(mode)

mode	`string` \| `number`	a mode name, or a combination of the MMO.inputs.DRAG_* flags
throws	`MMO.TypeError`	on an unknown name, or on anything but a string or a number

start()

Drag.js:201

start()

update(e)

Drag.js:267

Override: drive the drag state machine. Only the configured button counts, and the geometry is recomputed, clamped and pushed to the ghost on every move.

update(e)

e	`Event`
returns	`boolean`	false when the event is not for this gesture

stop()

Drag.js:334

Override: hide the ghost and fire drop and drag-over-stop on the dock, if any.

stop()

returns * whatever the parent's stop returns

findDockAt(x, y)

Drag.js:363

Find the dock at the given point

findDockAt(x, y)

x	`integer`
y	`integer`
returns	`MMO.core.Element` \| `false`

relativePosition(addOffset)

Drag.js:391

The dragged element's position relative to its offset parent, i.e. the value that can be written straight into style.left and style.top.

relativePosition(addOffset)

addOffset	`boolean`	add the element's original offset back in
returns	`x: number, y: number`	}

ptRelative(x, y)

Drag.js:404

Convert an absolute point into the dragged element's own coordinate system.

ptRelative(x, y)

x
y	`number=`	the ordinate, when `x` is a number
returns	`x: number, y: number`	}

setPosition(pos, relative)

Drag.js:421

Move the drag to a position, updating the ghost. This changes the PENDING geometry;

setPosition(pos, relative = true)

See: MMO.inputs.Drag#applyPosition writes it to the element.

pos
relative = true	`boolean`	the point is in document coordinates and must be converted

setSize(rect)

Drag.js:439

Resize the drag, updating the ghost. This changes the PENDING geometry;

setSize(rect)

See: MMO.inputs.Drag#applySize writes it to the element. A percentage is resolved against the dock, or the body when there is none.

rect

applyDock(dock)

Drag.js:525

Insert the dragged element as the correct child of dock

applyDock(dock = null)

dock = null

applyPosition(node)

Drag.js:554

Write the pending position to a node's inline style. Only the axes that actually moved are touched, so an untouched one keeps whatever the stylesheet says.

applyPosition(node = null)

node = null	`?Element`	defaults to the drag's target
returns	`this`

applySize(node)

Drag.js:567

Write the pending size to a node's inline style, min-width/min-height included so a flex or grid parent cannot shrink it back.

applySize(node = null)

node = null	`?Element`	defaults to the drag's target
returns	`this`

cleanCSS()

Drag.js:583

Restore the inline styles the target had before the drag started.

cleanCSS()