NAV Navbar
version 1.4.0-rc.2

interact.js is a JavaScript library for drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+).

Its aim is to present pointer input data consistently across different browsers and devices and provide convenient ways to pretend that the user’s pointer moved in a way that it wasn’t really moved (snapping, inertia, etc.).

The interact function takes an element or a CSS selector string returns an Interactable object which has various methods to configure actions and event listeners. A sequence of pointer down, move and up inputs can lead to InteractEvents being fired. If you add event listeners for an event type, those listener functions are given an InteractEvent object which provides pointer coordinates and speed and, in gesture events, scale, distance, angle, etc.

Note that interact.js doesn’t move elements for you. Styling an element so that it moves while a drag happens has to be done from your own event listeners. This way, you’re in control of everything that happens.

The basic steps to setting up your targets are:

  1. Create an Interactable target.
  2. Configure it to enable actions and add modifiers, inertia, etc.
  3. Add event listeners to provide visual feedback and update your app’s state.

For example, here’s some code for a very simple slider input:

// Step 1
const slider = interact('.slider')    // target elements with the "slider" class

slider
  // Step 2
  .draggable({                        // make the element fire drag events
    origin: 'self',                   // (0, 0) will be the element's top-left
    inertia: true,                    // start inertial movement if thrown
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'self'            // keep the drag coords within the element
      })
    ]
  })
  // Step 3
  .on('dragmove', function (event) {  // call this listener on every dragmove
    const sliderWidth = interact.getElementRect(event.target.parentNode).width
    const value = event.pageX / sliderWidth

    event.target.style.paddingLeft = (value * 100) + '%'
    event.target.setAttribute('data-value', value.toFixed(2))
  })

Installation

NPM

$ npm install --save interactjs@next
import interact from 'interactjs'

// or if using commonjs or AMD
const interact = require('interactjs')

If you’re using npm, install the package as a dependency with npm install interactjs@next then import or require the package in your JavaScript file.

CDN

<script src="https://cdn.jsdelivr.net/npm/interactjs@next/dist/interact.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/interactjs@next/dist/interact.min.js"></script>

You can also use the jsDelivr or unpkg CDNs by adding a <script> tag pointing to their servers.

interact is exposed as a CommonJS module, an AMD module, or a global variable depending on what the environment supports.

# install just the type definitions
$ npm install --save-dev @interactjs/types

If you’re using the library only through a CDN and want the TypeScript type definitions for development, you can install the @interactjs/types package as a dev dependency.

Drag, Resize and Gesture Actions

The Interactable methods draggable(), resizable() and gesturable() are used to enable and configure actions for target elements. They all have some common options as well as some action-specific options and event properties.

The common options for all actions include:

Drag and resize actions (but not gesture) can also have an inertia property which may be a boolean to enable or diable inertia, or an object with inertia configuration.

InteractEvents have the following properties common to all action types:

InteractEvent property Description
target The element that is being interacted with
interactable The Interactable that is being interacted with
interaction The Interaction that the event belongs to
x0, y0 Page x and y coordinates of the starting event
clientX0, clientY0 Client x and y coordinates of the starting event
dx, dy Change in coordinates of the mouse/touch
velocityX, velocityY The Velocity of the pointer
speed The speed of the pointer
timeStamp The time of creation of the event object

Draggable

Dropzone

Resizable

Gesturable