taye/interact.js: JavaScript Drag-and-Drop, Resize and Gesture Library

What interact.js Solves and Who Uses It

The browser's native HTML5 drag-and-drop API handles element dragging but imposes constraints: it modifies the DOM directly, does not support resizing gestures, cannot snap dragged elements to a grid, and offers no inertia physics for a smooth release. For developers who need richer behavior, interact.js fills that gap. It is a standalone JavaScript library for drag-and-drop, resizing and multi-touch pinch and rotate gestures, with optional inertia and snapping modifiers.

The README describes the target as modern browsers and Internet Explorer 9 and up, covering both desktop and mobile versions of Chrome, Firefox and Opera. The library handles SVG elements in addition to HTML elements, which is useful for interactive diagram editors or data visualization tools where shapes are defined in SVG. Simultaneous interactions (two users or two touch points each dragging different elements) are supported without special configuration.

A key design principle stated in the README is that interact.js does not modify the DOM except to change the cursor style (and even cursor modification can be disabled). Element positioning during a drag must be handled by the developer in the event listener: the library reports where the pointer is and by how much it has moved, and the developer decides what to do with that information. This design keeps the library composable with any rendering approach.

Installation via npm and CDN

The README lists five installation options. Using npm:

npm install interactjs

Using the jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

Using unpkg:

<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>

For Rails 5.1 and later, add it via yarn and then require it in the asset pipeline:

yarn add interactjs

For TypeScript type definitions as a standalone package without the runtime:

npm install --save-dev @interactjs/types

The README notes that the npm package already includes TypeScript definitions, so installing @interactjs/types separately is only necessary when you want the typings without the runtime library. The package.json shows version 1.10.28. The project also lists a Webjars entry for SBT/Play 2 projects in the Java ecosystem.

The Core Interaction API and Event Model

All interactions are configured by calling interact() with a CSS selector or element reference, then chaining configuration methods. The README gives a complete example using drag-and-drop with a snap modifier:

var pixelSize = 16;

interact('.rainbow-pixel-canvas')
  .origin('self')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        // snap to the corners of a grid
        targets: [
          interact.snappers.grid({ x: pixelSize, y: pixelSize }),
        ],
      })
    ],
    listeners: {
      // draw colored squares on move
      move: function (event) {
        var context = event.target.getContext('2d'),
            // calculate the angle of the drag direction
            dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI;
      }
    }
  });

The event object passed to listeners includes dx and dy (delta movement from the previous event), x and y (absolute coordinates), velocity and angle properties. The target property is the DOM element being interacted with. This event model means the developer has all the information needed to implement any visual response, from CSS transform updates to canvas drawing commands.

Modifiers: Snapping and Inertia

interact.js uses a modifiers system to apply constraints and physics to interactions. The two most widely used modifiers are snap and inertia. The snap modifier accepts a targets array that can be a fixed coordinate list, a function returning coordinates, or a grid defined by interact.snappers.grid(). When a drag is within a configured snap range, the pointer position is replaced with the snapped position before the move event fires. This is how the README example keeps elements on a 16-pixel grid without the developer doing any rounding.

Inertia gives dragged and resized elements a momentum effect: when the user releases, the element continues moving and decelerates to a stop based on the pointer velocity at release. The inertia modifier is an object passed in the configuration alongside other modifiers. Snapping and inertia can be combined: the element follows inertia physics after release and then snaps to the nearest target when it comes to rest.

Other modifiers restrict movement to certain axes or within defined boundaries. The modifiers architecture is documented at interactjs.io/docs, and the examples/ directory in the repository contains working demonstrations for snap/, sortable/, dropzones/, iframes/ and other interaction patterns.

SVG Support and Cross-Browser Considerations

The README explicitly includes SVG support in its feature list: interact.js works with SVG elements, and the documentation page at interactjs.io has a dedicated section on using interact.js in SVG files. This makes the library applicable for interactive node graphs, diagram editors and any interface where interactive shapes live in an SVG element rather than HTML divs.

The Internet Explorer 9 and up claim in the README is a stated compatibility boundary. Supporting IE9 requires specific consideration in 2026: the browser has been end-of-life since 2016 and its user base is negligible in most contexts. The README's inclusion of IE9 in the compatibility list signals that the library was designed conservatively and avoids APIs that broke in older browsers, but developers deploying to modern-only targets should not interpret this as a reason to choose interact.js over alternatives. The library works well in modern browsers; the IE9 support claim is a historical boundary, not a current selling point.

The .browserslistrc file in the repository root defines the target browser list used for the build output, which would show the actual supported configuration more precisely than the README's headline claim.

Where interact.js Is Not the Right Tool

interact.js handles pointer and touch events and reports positions and deltas to the developer. What it does not do is manage state, handle drop zones automatically (a drop zone must be configured separately with interact().dropzone()), or provide pre-built sortable list behavior out of the box. The examples/ directory includes a sortable/ example, but it is a demonstration, not a built-in sortable component.

Developers who need a drag-and-drop library with built-in list reordering, tree-view sorting or grid layout rearrangement will find that SortableJS provides that level of abstraction with less configuration. SortableJS handles the DOM updates that interact.js intentionally leaves to the developer. The two libraries target different points on the control-versus-convenience spectrum.

For applications that only need to detect touch gestures (swipe, pinch-to-zoom) without any drag behavior, Hammer.js is a gesture-only library with a narrower footprint. interact.js bundles drag, resize and gesture capabilities together. If only gesture detection is needed, the bundled size of interact.js may be unnecessary overhead. The README RELATED SEARCHES note "interact js vs hammerjs" as a comparison people actively search for, which confirms this is a common decision point.

Repository Structure and MIT License

The repository uses a monorepo layout. The packages/ directory contains the individual subpackages that make up the interact.js build. The build process uses Rollup to produce both a standard bundle (bundle.rollup.config.cjs) and an ESNext build (esnext.rollup.config.cjs). TypeDoc generates type documentation, and Lerna manages the monorepo versioning. The project uses Yarn (yarn.lock is at the root), Husky for pre-push hooks, and Babel alongside TypeScript for the build.

The test suite uses Jest (jest.config.ts) with a vijest.config.js file, suggesting a mix of testing configurations. The @testing-library/dom and @testing-library/user-event packages in devDependencies indicate DOM-level tests for the interaction behavior.

The last push was on 2026-08-01. There are no GitHub releases in the recent history. The license is MIT. The MIT license allows commercial use, modification and redistribution without requiring source disclosure. The documentation site at interactjs.io is separate from the repository and contains the full API reference and examples beyond what the README covers.

Editorial conclusion

Front-end developers who need drag-and-drop, element resizing or multi-touch gestures in a browser application without modifying the DOM themselves will find interact.js a capable fit. The library is standalone with no framework dependencies, and the TypeScript definitions are bundled in the npm package. Engineers who need only basic HTML5 drag-and-drop without inertia or snapping can use the browser's native drag API and avoid the dependency. The last push was on 2026-08-01, and the MIT license allows unrestricted commercial use. Install via npm install interactjs and confirm behavior in IE9 if supporting that browser is a requirement.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository