Skip to main content
The Draggable class enables you to make DOM elements or JavaScript objects draggable with advanced features like momentum scrolling, container constraints, snap points, and customizable physics.

​
Constructor

new Draggable(target, parameters)
​
target
TargetsParam
required
Element to make draggable. Can be:
  • CSS selector string (e.g., '.draggable')
  • DOM element
  • JavaScript object with x, y, width, height properties
​
parameters
DraggableParams
Configuration object for draggable behavior.

​
Configuration Parameters

​
Axis Control

​
x
boolean | DraggableAxisParam
default:"true"
Enable or configure horizontal dragging:
  • true: Enable with defaults
  • false: Disable horizontal dragging
  • Object: Configure axis behavior
​
y
boolean | DraggableAxisParam
default:"true"
Enable or configure vertical dragging:
  • true: Enable with defaults
  • false: Disable vertical dragging
  • Object: Configure axis behavior

​
Axis Configuration Object

​
x.mapTo
string
default:"'translateX'"
Property to map the x-axis to (e.g., 'left', 'x', 'scrollLeft').
​
x.modifier
(value: number) => number | string
Transform the value before applying.
​
x.composition
'none' | 'replace' | 'blend'
How dragging composes with other animations.
​
x.snap
number | Array<number> | Function
Snap points specific to this axis.

​
Container & Boundaries

​
container
DOMTargetSelector | Array<number> | Function
Constrain dragging within boundaries:
  • CSS selector or element: Use element bounds
  • [top, right, bottom, left]: Custom boundaries in pixels
  • Function: Dynamically return container
​
containerPadding
number | Array<number> | Function
default:"0"
Padding inside the container boundaries:
  • Single number: Same padding on all sides
  • [top, right, bottom, left]: Individual side padding
​
containerFriction
number | Function
default:"0.8"
Friction when dragging outside container (0-1). Higher values = more friction.
​
releaseContainerFriction
number | Function
default:"containerFriction"
Friction when releasing outside container (0-1).

​
Interaction

​
trigger
DOMTargetSelector
Element that triggers the drag. If not specified, uses the target element.
​
cursor
boolean | DraggableCursorParams | Function
default:"false"
Cursor behavior:
  • false: No cursor change
  • true: Use default cursors
  • Object: Custom cursor styles

​
Cursor Configuration

​
cursor.onHover
string
default:"'grab'"
Cursor when hovering over trigger element.
​
cursor.onGrab
string
default:"'grabbing'"
Cursor while dragging.

​
Drag Behavior

​
dragSpeed
number | Function
default:"1"
Speed multiplier for drag movement.
​
dragThreshold
number | DraggableDragThresholdParams | Function
default:"{mouse: 3, touch: 7}"
Minimum distance in pixels before drag starts:
  • Single number: Same for mouse and touch
  • Object: Different values for mouse and touch

​
Snap Points

​
snap
number | Array<number> | Function
default:"0"
Global snap points for both axes:
  • Number: Snap to multiples of this value
  • Array: Snap to specific values
  • Function: Dynamically calculate snap points

​
Momentum & Physics

​
minVelocity
number | Function
default:"0"
Minimum velocity for momentum scrolling.
​
maxVelocity
number | Function
default:"50"
Maximum velocity cap for momentum scrolling.
​
velocityMultiplier
number | Function
default:"1"
Multiplier for velocity calculations.

​
Release Animation

​
releaseEase
EasingParam
Easing function for release animation. Can be spring configuration or standard easing.
​
releaseMass
number
default:"1"
Spring mass for release animation (when using spring physics).
​
releaseStiffness
number
default:"80"
Spring stiffness for release animation.
​
releaseDamping
number
default:"20"
Spring damping for release animation.

​
Auto-Scroll

​
scrollSpeed
number | Function
default:"1.5"
Speed of auto-scrolling when dragging near container edges.
​
scrollThreshold
number | Function
default:"20"
Distance from edge (in pixels) that triggers auto-scroll.

​
Modifiers

​
modifier
(value: number) => number | string
Global modifier function for both x and y values.

​
Event Callbacks

​
onGrab
(self: Draggable) => void
Called when dragging starts (on mousedown/touchstart).
​
onDrag
(self: Draggable) => void
Called continuously while dragging.
​
onRelease
(self: Draggable) => void
Called when drag is released (on mouseup/touchend).
​
onUpdate
(self: Draggable) => void
Called on every position update (during drag and release animation).
​
onSettle
(self: Draggable) => void
Called when the element comes to rest after release.
​
onSnap
(self: Draggable) => void
Called when element snaps to a snap point.
​
onResize
(self: Draggable) => void
Called when container or target is resized.
​
onAfterResize
(self: Draggable) => void
Called after resize calculations complete.

​
Instance Properties

​
Position Properties

​
x
number
Current x position. Can be read or set directly.
​
y
number
Current y position. Can be read or set directly.
​
progressX
number
Normalized x position (0-1) within container bounds.
​
progressY
number
Normalized y position (0-1) within container bounds.
​
deltaX
number
Change in x position since last frame.
​
deltaY
number
Change in y position since last frame.
​
velocity
number
Current velocity magnitude.
​
angle
number
Current drag angle in radians.

​
State Properties

​
grabbed
boolean
Whether the element is currently grabbed.
​
dragged
boolean
Whether dragging has started (moved beyond threshold).
​
released
boolean
Whether the element was just released.
​
enabled
boolean
Whether the draggable is currently enabled.

​
Target Elements

​
$target
HTMLElement
The target DOM element being dragged.
​
$trigger
HTMLElement
The element that triggers the drag interaction.
​
$container
HTMLElement
The container element (if specified).
​
animate
AnimatableObject
Internal Animatable instance used for animations.

​
Example

import { Draggable } from 'anime';

const draggable = new Draggable('.box', {
  container: '.container',
  containerPadding: 20,
  snap: 50,
  cursor: {
    onHover: 'grab',
    onGrab: 'grabbing'
  },
  onDrag: (self) => {
    console.log('Position:', self.x, self.y);
    console.log('Velocity:', self.velocity);
  },
  onSnap: (self) => {
    console.log('Snapped to:', self.x, self.y);
  },
  onSettle: (self) => {
    console.log('Settled at:', self.x, self.y);
  }
});

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us