Interactable

The Interactable plugin makes it easy to add drag-and-drop interactions. It works perfectly on both mouse and touch devices, and is highly optimized to follow your finger or cursor instantly.

---

1. Dragging & Bounds

You create a drag interaction using Interactable.create().

You can limit where the element can go using the bounds property. If you give it another element, it will automatically stay inside that element. Turning on inertia gives it physics so it keeps sliding when you throw it.

Interact with the element to observe edgeResistance tension and inertia physics. Output is logged to the console.

Drag

60 FPS

In the demo above, try pulling the element past the edge to feel the edgeResistance, and throw it to see the inertia.

import { Interactable } from 'animx/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 make your element snap to a grid. Normally, it snaps after you let go. But you can turn on liveSnap to make it smoothly snap to the grid while you are still dragging it.

Interact with the element to observe live grid snapping interpolation.

60 FPS

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

The snap property can be a simple number for a grid size, an array of exact {x, y} points, or a custom function.

---

3. Rotation Mode

You don't just have to drag things up and down. If you set type: 'rotation', you can spin the element like a dial or a wheel.

Rotate the element. Live rotation angles are logged to the console.

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 direction. 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 pulling past them (0 = impossible, 1 = no resistance).
inertia	boolean	true	Adds throwing physics so it keeps moving when you let go.
snap	number|Array|Function	null	Snap to a grid size, an array of points, or a function.
liveSnap	boolean|Object	false	Snaps while dragging. Can be true or an animation config object ({ duration: 0.15 }).
minimumMovement	number	2	How far the mouse/finger must move before the drag starts (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 native browser PointerEvent as the second.

Callback	Description
onPress	Fired the instant you touch or click the element.
onDragStart	Fired once you move past the minimumMovement amount.
onDrag	Fired every time the mouse/finger moves during the drag.
onRelease	Fired the instant you let go.
onDragEnd	Fired after the drag is fully complete (waits for inertia or snapping to finish).
onSnap	Fired when the element perfectly aligns with a snap point.

Instance Methods & Properties

Name	Type	Description
x / y	Property	The live x and y position.
rotation	Property	The live rotation angle (if type: 'rotation').
isDragging	Property	true if you are actively dragging past the minimumMovement.
isPressed	Property	true if pointer is currently held down.
kill()	Method	Completely removes event listeners and restores original cursors.
applyBounds()	Method	Manually recalculates the bounds (useful if the screen changes size).