Interactable

The Interactable plugin enables advanced pointer-based drag-and-drop interactions. It uses unified Pointer Events to work flawlessly across mouse and touch screens, and bypasses standard tween engines to provide zero-latency 120hz tracking.

---

1. Dragging & Bounds

Making an element draggable is as simple as passing it to Interactable.create().

You can restrict movement by passing a bounds property. If you pass an element (like the parent container), the plugin calculates the bounding box perfectly. When the user releases the mouse, inertia applies momentum physics.

Try grabbing the box and violently throwing it against the edge of the container to see the edgeResistance and inertia in action! Check the console to see when dragging starts and ends.

Drag

60 FPS

Try grabbing the box and violently throwing it against the edge of the container to see the edgeResistance and inertia in action.

import { Interactable } from 'animx/plugins/Interactable'

Interactable.create('.box', {
  bounds: '.container',
  edgeResistance: 0.85, // How stiff the boundary feels (0-1)
  inertia: true         // Throw physics
})

---

2. Snapping & Grids

You can force a dragged element to snap to a specific grid or set of points. By default, snapping only occurs after you release the mouse. But if you enable liveSnap, the element will interpolate to the nearest snap point while you drag it.

Try grabbing the coin. Drag it around the grid and watch it snap to the nearest point!. Try throwing it!

60 FPS

Interactable.create('.coin', {
  snap: 50, // Snap to 50px increments
  liveSnap: {
    duration: 0.15,      // The tween duration pulling it to the point
    ease: 'cubic.out'
  }
})

You can pass a number (for a grid), an array of coordinate objects [{x: 0, y: 0}, {x: 100, y: 100}], or a custom function to the snap property.

---

3. Rotation Mode

You aren't limited to X/Y coordinates. By setting type: 'rotation', you can turn any element into a turnable dial or wheel.

Grab the dial and rotate it! Check the console to see the live rotation angle as you drag.

60 FPS

Interactable.create('.dial', {
  type: 'rotation',
  inertia: true,
  snap: 45 // Snap to 45 degree increments
})

---

API Reference

Constructor

const instance = Interactable.create(target, config)

Config Property	Type	Default	Description
type	string	'x,y'	Restricts movement. Options: 'x', 'y', 'x,y', 'rotation'.
bounds	string|Element|Object	null	Element selector, or coordinate object ({minX:0, maxX:100}).
edgeResistance	number	0.85	How "stiff" the boundaries feel when dragging past them (0 = impossible to drag past, 1 = no resistance).
inertia	boolean	true	Applies momentum/friction physics upon release based on flick velocity.
snap	number|Array|Function	null	Snap logic. Grid number, array of coordinates, or function.
liveSnap	boolean|Object	false	Snaps during the drag. Can be true or a tween config object ({ duration: 0.15 }).
minimumMovement	number	2	Pixels the pointer must move before initiating a drag (prevents accidental clicks).
cursor	string	'grab'	CSS cursor on hover.
activeCursor	string	'grabbing'	CSS cursor while dragging.

Event Callbacks

All callbacks receive the Interactable instance as the first argument, and the raw DOM PointerEvent as the second.

Callback	Description
onPress	Fired the instant the pointer touches the element.
onDragStart	Fired once minimumMovement threshold is exceeded.
onDrag	Fired on every pointer movement during an active drag.
onRelease	Fired the instant the pointer leaves the screen or mouse is released.
onDragEnd	Fired after the drag is complete (and after inertia/snapping settles).
onSnap	Fired when the element perfectly aligns with a snap point.

Instance Methods & Properties

Name	Type	Description
x / y	Property	The live transform coordinates.
rotation	Property	The live rotation angle (if type: 'rotation').
isDragging	Property	true if actively moving past minimumMovement.
isPressed	Property	true if pointer is currently held down.
kill()	Method	Completely removes event listeners and restores original cursors.
applyBounds()	Method	Manually recalculates bounding box coordinates (useful on window resize).