# interact-js

> A small interaction event unifiying library

Latest version **2.1.0** (published 2018-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install interact-js
pnpm add interact-js
yarn add interact-js
bun add interact-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2018-08-26 |
| First published | 2013-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 70 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Kory Nunn |
| Maintainers | korynunn |
| Keywords | events, touch, drag-n-drop |

## Links

- npm: https://www.npmjs.com/package/interact-js
- Repository: https://github.com/korynunn/interact
- Homepage: https://github.com/korynunn/interact#readme
- Issues: https://github.com/korynunn/interact/issues
- npm.io page: https://npm.io/package/interact-js

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 2.1.0 (latest) — 2018-08-26
- 2.0.1 — 2014-09-12
- 2.0.0 — 2014-04-15
- 1.0.0 — 2014-04-14
- 0.4.6 — 2014-01-29
- 0.4.5 — 2014-01-20
- 0.4.3 — 2014-01-14
- 0.4.2 — 2014-01-10
- 0.4.1 — 2013-12-09
- 0.4.0 — 2013-11-13
- 0.3.0 — 2013-11-07
- 0.2.1 — 2013-08-23
- 0.2.0 — 2013-08-21
- 0.1.6 — 2013-08-13
- 0.1.5 — 2013-05-11
- … 5 more at https://npm.io/package/interact-js/versions

## README

interact
========

An interaction unifying library.

Makes binding to dragging and moving events easier.

Allows easy handling of multi-touch interactions.

## Usage

Get it:

    npm install interact-js

Require it:

    var interact = require('interact-js');

Use it:

    interact.on('move', document.body, moveHandler);
    interact.on('start', document.body, startHandler);
    interact.on('drag', document.body, dragHandler);
    interact.on('end', document.body, endHandler);
    interact.on('cancel', document.body, cancelHandler);

## Events

### start

mousedown and/or touchstart

### drag

A mousemove while the mouse button is pressed

or

A touchmove.

### move

Usually a mousemove

This event is rarely used.

### end

mouseup and/or touchend

### cancel

The event was canceled.

This could happen if the user ALT+TAB's, or if a system prompt appears wile they are interacting with the UI.

## an Interaction

Event handlers are passed an instance of Interaction.

    interact.on('drag', document.body, function(interaction){
                                                ^^^^^^^^^^^
    });

The Interaction instance is persisted throughout the lifecycle of a user interaction.
This means you can safely store custom data on the interaction, and it will be available in every following stage of the interaction.
For example, in 'start', you could attach some data, and that data will still be there on 'drag'.

An interaction has a number of properties and methods that can be helpful

### interaction.preventDefault

Maps to event.preventDefault

### interaction.stopPropagation

Maps to event.stopPropagation

### interaction.getActualTarget

Often, touch browsers will report the element that was touchstarted, even after the user moves their finger off of that element

This is stupid.

getActualTarget will get the actual element that is under the users finger.

### interaction.getMoveDistance()

Returns the distance bewteen this interaction and the previous one.

    interaction.getMoveDistance();

    // 12.5476

### interaction.getMoveDelta()

Returns the difference between this interaction and the previous one in x and y

    interaction.getMoveDelta();

    // {x: 5, y: -3}

### interaction.getSpeed()

Returns the speed in pixels per second over the last two pixels

    interaction.getSpeed();

    // 5.0193452

### interaction.getCurrentAngle(blend)

Returns the angle that the interaction is traveling at.

    interaction.getCurrentAngle();

    // 90

pass true to get much nicer results at low speeds. Interact will figure out a more useful angle based of previous moves, and the speed that the interaction is moving.

    interaction.getCurrentAngle(true);

    // 104.246342

### interaction.getAllInteractions()

Returns an array of all interactions that are currently active.

    interaction.getAllInteractions();

    // [Interaction, Interaction, Interaction]

### interaction.moves

An array of all the previous moves AND drags associated with the interaction.

At 1000 moves, the head of the list will be culled.

If you need more, you can track them yourself :)

### interaction.angle

The angle between the last two points.

This value is simplistic, and will report hard 90 degree mutliples at low speeds, as the interaction moves between two pixels.

use getCurrentAngle(true) for nicer angles.

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