# interactjs

> Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)

Latest version **1.10.28** (published 2026-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install interactjs
pnpm add interactjs
yarn add interactjs
bun add interactjs
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high quality score; popular repo.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.10.28 |
| Published | 2026-08-01 |
| First published | 2016-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12931 |
| Maintainers | taye |
| Keywords | interact.js, draggable, droppable, drag, drop, drag and drop, resize, touch, multi-touch, gesture, snap, inertia, grid, autoscroll, SVG, interact |

## Links

- npm: https://www.npmjs.com/package/interactjs
- Repository: https://github.com/taye/interact.js
- Homepage: https://interactjs.io
- Issues: https://github.com/taye/interact.js/issues
- npm.io page: https://npm.io/package/interactjs

## Dependencies (1)

- [@interactjs/types](https://npm.io/package/@interactjs/types.md) 1.10.28

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.10.28 (latest) — 2026-08-01
- 1.8.3 (next) — 2020-02-02
- 1.10.27 — 2024-03-28
- 1.10.26 — 2023-12-07
- 1.10.25 — 2023-12-04
- 1.10.24 — 2023-12-04
- 1.10.23 — 2023-11-26
- 1.10.22 — 2023-11-24
- 1.10.21 — 2023-11-15
- 1.10.20 — 2023-11-05
- 1.10.19 — 2023-09-17
- 1.10.18 — 2023-07-30
- 1.10.17 — 2022-07-09
- 1.10.16 — 2022-07-09
- 1.10.15 — 2022-07-09
- … 156 more at https://npm.io/package/interactjs/versions

## README

<a href="http://interactjs.io"><img alt="interact.js" src="https://c4d6f7d727e094887e93-4ea74b676357550bd514a6a5b344c625.ssl.cf2.rackcdn.com/ijs-solid.svg" height="70px" width="100%"></a>

<h2>
  JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+).
</h2>

<div align="center">
<a href="https://gitter.im/taye/interact.js"><img src="https://badges.gitter.im/taye/interact.js.svg" alt="Gitter"></a>
<a href="https://www.jsdelivr.com/package/npm/interactjs"><img src="https://data.jsdelivr.com/v1/package/npm/interactjs/badge" alt="jsDelivr"></a>
<a href="https://github.com/taye/interact.js/actions/workflows/workflow.yml"><img src="https://github.com/taye/interact.js/actions/workflows/workflow.yml/badge.svg" alt="Build Status"></a>
<a href="https://codeclimate.com/github/taye/interact.js/test_coverage"><img src="https://api.codeclimate.com/v1/badges/0168aeaeed781a949088/test_coverage"/></a>
</div>
<br>

Features include:

- **inertia** and **snapping**
- **multi-touch**, simultaneous interactions
- cross browser and device, supporting the **desktop and mobile** versions of
  Chrome, Firefox and Opera as well as **Internet Explorer 9+**
- interaction with [**SVG**](http://interactjs.io/#use_in_svg_files) elements
- being **standalone and customizable**
- **not modifying the DOM** except to change the cursor (but you can disable
  that)

## Installation

- [npm](https://www.npmjs.org/): `npm install interactjs`
- [jsDelivr CDN](https://cdn.jsdelivr.net/npm/interactjs/): `<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>`
- [unpkg CDN](https://unpkg.com/interactjs/): `<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>`
- [Rails 5.1+](https://rubyonrails.org/):
  1. `yarn add interactjs`
  2. `//= require interactjs/interact`
- [Webjars SBT/Play 2](https://www.webjars.org/): `libraryDependencies ++= Seq("org.webjars.npm" % "interactjs" % version)`

### Typescript definitions

The project is written in Typescript and the npm package includes the type
definitions, but if you need the typings alone, you can install them with:

```
npm install --save-dev @interactjs/types
```

## Documentation

http://interactjs.io/docs

## Example

```javascript
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;

        // set color based on drag angle and speed
        context.fillStyle = 'hsl(' + dragAngle + ', 86%, '
                            + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)';

        // draw squares
        context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2,
                         pixelSize, pixelSize);
      }
    }
  })
  // clear the canvas on doubletap
  .on('doubletap', function (event) {
    var context = event.target.getContext('2d');

    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  });

  function resizeCanvases () {
    [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (canvas) {
      canvas.width = document.body.clientWidth;
      canvas.height = window.innerHeight * 0.7;
    });
  }

  // interact.js can also add DOM event listeners
  interact(document).on('DOMContentLoaded', resizeCanvases);
  interact(window).on('resize', resizeCanvases);
```

See the above code in action at https://codepen.io/taye/pen/tCKAm

## License

interact.js is released under the [MIT License](http://taye.mit-license.org).

[ijs-twitter]: https://twitter.com/interactjs
[upcoming-changes]: https://github.com/taye/interact.js/blob/main/CHANGELOG.md#upcoming-changes

---
_Source: https://npm.io/package/interactjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._