Position Methods
setX()
Set the x position of the draggable element.
draggable.setX(x, muteUpdateCallback?)
Target x position in pixels.
If true, prevents the onUpdate callback from firing.
this - The Draggable instance for method chaining.
Example
draggable.setX(100); // Set x to 100px, triggers onUpdate
draggable.setX(200, true); // Set x to 200px, silent update
setY()
Set the y position of the draggable element.
draggable.setY(y, muteUpdateCallback?)
Target y position in pixels.
If true, prevents the onUpdate callback from firing.
this - The Draggable instance for method chaining.
Example
draggable.setY(150); // Set y to 150px, triggers onUpdate
draggable.setY(300, true); // Set y to 300px, silent update
draggable.scrollInView(duration?, gap?, ease?)
Duration of the scroll animation in milliseconds.
Gap in pixels between the element and the scroll boundary.
ease
EasingParam
default:"eases.inOutQuad"
Easing function for the scroll animation.
this - The Draggable instance for method chaining.
Example
// Scroll element into view with defaults
draggable.scrollInView();
// Custom duration and gap
draggable.scrollInView(500, 20);
// With custom easing
draggable.scrollInView(600, 10, 'outQuad');
animateInView()
Animates the draggable element back into the container bounds if it’s out of view.
draggable.animateInView(duration?, gap?, ease?)
Duration of the animation in milliseconds.
Gap in pixels from the container edges.
ease
EasingParam
default:"eases.inOutQuad"
Easing function for the animation.
this - The Draggable instance for method chaining.
Example
// Animate back into view
draggable.animateInView();
// With custom settings
draggable.animateInView(800, 15, 'outElastic');
State Management
enable()
Enables the draggable functionality and event listeners.
Returns: this - The Draggable instance for method chaining.
Example
const draggable = new Draggable('.box');
draggable.enable(); // Dragging is now active
disable()
Disables the draggable functionality and removes event listeners. The element can no longer be dragged.
Returns: this - The Draggable instance for method chaining.
Example
draggable.disable(); // Dragging is now disabled
stop()
Stops all active animations and momentum scrolling.
Returns: this - The Draggable instance for method chaining.
Example
// Stop all movement immediately
draggable.stop();
reset()
Resets the draggable to its initial state (position 0, 0) and clears all state.
Returns: this - The Draggable instance for method chaining.
Example
// Reset to origin
draggable.reset();
revert()
Completely reverts the draggable instance:
- Resets position and state
- Disables dragging
- Removes all event listeners
- Disconnects resize observer
- Cleans up internal animations
Returns: this - The Draggable instance for method chaining.
Example
// Clean up draggable completely
draggable.revert();
Update Methods
refresh()
Refreshes all internal calculations and parameters. Call this if:
- Container size changes
- Parameters need to be recalculated
- Element position is modified externally
This method recalculates:
- Container and target bounds
- Scroll boundaries
- Snap points
- All dynamic parameters (functions are re-evaluated)
Example
// Window resize handler
window.addEventListener('resize', () => {
draggable.refresh();
});
// After changing container
draggable.parameters.container = '.new-container';
draggable.refresh();
updateBoundingValues()
Updates all bounding boxes and dimensions. This is called automatically by refresh() but can be called manually for performance-critical updates.
draggable.updateBoundingValues()
Factory Function
createDraggable()
Factory function to create a Draggable instance. This is a convenience wrapper around the Draggable constructor.
createDraggable(target, parameters?)
Element to make draggable. Can be:
- CSS selector string
- DOM element
- JavaScript object
Configuration object for draggable behavior.
Draggable - A new Draggable instance.
Example
import { createDraggable } from 'anime';
const draggable = createDraggable('.box', {
container: '.container',
snap: 50,
onDrag: (self) => {
console.log('Dragging:', self.x, self.y);
}
});
Advanced Examples
Programmatic Control
const draggable = createDraggable('.box', {
container: '.container',
snap: 100
});
// Move to specific position
draggable.setX(200);
draggable.setY(150);
// Or use direct assignment
draggable.x = 200;
draggable.y = 150;
// Get current position
console.log('Position:', draggable.x, draggable.y);
// Get progress (0-1 within container)
console.log('Progress:', draggable.progressX, draggable.progressY);
Conditional Dragging
const draggable = createDraggable('.box');
// Disable/enable based on condition
const checkbox = document.querySelector('#enable-drag');
checkbox.addEventListener('change', (e) => {
if (e.target.checked) {
draggable.enable();
} else {
draggable.disable();
}
});
Sync Multiple Draggables
const draggable1 = createDraggable('.box1', {
y: false, // Only horizontal
onDrag: (self) => {
// Sync position to another element
draggable2.setX(self.x, true);
}
});
const draggable2 = createDraggable('.box2', {
y: false
});
Bounds and Constraints
const draggable = createDraggable('.box', {
container: [0, 400, 300, 0], // [top, right, bottom, left]
containerPadding: [10, 10, 10, 10],
onUpdate: (self) => {
// Check if out of bounds
const ob = self.isOutOfBounds(
self.containerBounds,
self.x,
self.y
);
if (ob) {
console.log('Out of bounds!');
// Animate back in
self.animateInView(400);
}
}
});
Dynamic Snap Points
const draggable = createDraggable('.slider', {
y: false,
snap: (self) => {
// Generate snap points dynamically
const points = [];
for (let i = 0; i <= 400; i += 50) {
points.push(i);
}
return points;
},
onSnap: (self) => {
console.log('Snapped to:', self.x);
}
});
Cleanup
const draggable = createDraggable('.box');
// Later, clean up completely
function cleanup() {
draggable.revert();
}
// Or just reset without removing
function resetPosition() {
draggable.reset();
}
See Also