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

> A JavaScript library for drag-and-drop, resizing, and multi-touch gesture handling that works with mouse, touch, and pointer events through a unified API.

## Install

Save in your project root:

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

## Quick Use
```bash
npm install interactjs
```
```js
import interact from 'interactjs';
interact('.draggable').draggable({
  listeners: {
    move(event) {
      const target = event.target;
      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
      target.style.transform = `translate(${x}px, ${y}px)`;
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
  }
});
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-e666a4d4
Author: AI Open Source