interact.js — Drag, Resize, and Multi-Touch Gestures for the Web

Introduction

interact.js provides a unified API for implementing drag-and-drop, resizing, and multi-touch gestures in web applications. It normalizes mouse, touch, and pointer events into a consistent interface, making it straightforward to build interactive interfaces that work across desktop and mobile devices.

What interact.js Does

• Enables drag-and-drop with inertia and snap-to-grid capabilities
• Provides element resizing with customizable handles and aspect ratio locking
• Handles multi-touch pinch, rotate, and custom gesture recognition
• Supports drop zones with accept filters and overlap detection
• Works with SVG elements and nested coordinate systems

Architecture Overview

interact.js operates by attaching pointer event listeners to the document and matching events to configured interactable targets. It maintains an internal interaction state machine that tracks active pointers, calculates deltas, and dispatches high-level events (dragmove, resizemove, gesturechange). Modifiers like snap, restrict, and inertia are applied as a pipeline, transforming raw pointer coordinates before they reach event listeners.

Self-Hosting & Configuration

• Install via npm and import, or load from a CDN
• Chain .draggable(), .resizable(), and .gesturable() on any CSS selector
• Use modifiers like interact.modifiers.snap() for grid alignment
• Set restrict modifiers to contain elements within parent boundaries
• Configure inertia: true for momentum-based movement after release

Key Features

• Unified API across mouse, touch, and pointer events
• Built-in snap, restrict, and inertia modifiers
• Multi-touch gesture support for pinch and rotate
• Drop zone management with overlap calculation modes
• SVG-aware coordinate handling for embedded graphics

Comparison with Similar Tools

• SortableJS — focused on list reordering; interact.js handles free-form drag, resize, and gestures
• dnd-kit — React-specific with accessibility focus; interact.js is framework-agnostic
• React DnD — React-only with HTML5 backend; interact.js supports multi-touch natively
• Hammer.js — gesture-only (pinch, swipe); interact.js adds drag-and-drop and resizing

FAQ

Q: Does interact.js move elements automatically? A: No. It fires events with coordinate deltas. You apply the transform in your event listener for full control.

Q: Can I use it with React or Vue? A: Yes. interact.js is framework-agnostic. Initialize it in lifecycle hooks and clean up on unmount.

Q: Does it support touch devices? A: Yes. It handles touch, pointer, and mouse events through a unified interface with multi-touch gesture support.

Q: How does snap-to-grid work? A: Add interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 30, y: 30 })] }) to your configuration.

Sources

• https://github.com/taye/interact.js
• https://interactjs.io