NAV

Installation

interact.js offers two sets of packages that you can add to your project:

  1. To get started quickly, you can use the package named interactjs on npm. This package contains all the features of the library already pre-bundled.
  2. If you'd like to keep your JS payload small, there are npm packages under the @interactjs/ scope which let you choose which features to include. These packages are distributed as ES6 modules and may need to be transpiled for older browsers.

npm pre-bundled

# install pre-bundled package with all features
$ npm install --save interactjs
// es6 import
import interact from 'interactjs'
// or if using commonjs or AMD
const interact = require('interactjs')

To use the pre-bundled package with npm, install the package as a dependency with npm install interactjs then import or require the package in your JavaScript files.

CDN pre-bundled

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/interactjs/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.

npm streamlined

# install only the features you need
$ npm install --save @interactjs/interact \
  @interactjs/auto-start \
  @interactjs/actions \
  @interactjs/modifiers \
  @interactjs/dev-tools
import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'

interact('.item').draggable({
  listeners: {
    move (event) {
      console.log(event.pageX, event.pageY)
    }
  }
})

For a more streamlined JS payload, you can install and import the package for each feature you need:

Package nameDescription
@interactjs/interact(required) provides the interact() method
@interactjs/actionsDrag, resize, gesture actions
@interactjs/auto-startStart actions with pointer down, move sequence
@interactjs/modifiersSnap, restrict, etc. modifiers
@interactjs/snappersProvides interact.snappers.grid() utility
@interactjs/inertiaDrag and resize inertia-like throwing
@interactjs/reflowinteractable.reflow(action) method to trigger modifiers and event listeners
@interactjs/dev-toolsConsole warnings for common mistakes (optimized out when NODE_ENV === 'production') and a babel plugin for optimized production builds

CDN streamlined

<script type="module">
import 'https://cdn.interactjs.io/v1.9.20/auto-start/index.js'
import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'
import 'https://cdn.interactjs.io/v1.9.20/actions/resize/index.js'
import 'https://cdn.interactjs.io/v1.9.20/modifiers/index.js'
import 'https://cdn.interactjs.io/v1.9.20/dev-tools/index.js'
import interact from 'https://cdn.interactjs.io/v1.9.20/interactjs/index.js'

interact('.item').draggable({
  onmove(event) {
    console.log(event.pageX,
                event.pageY)
  }
})
</script>

The packages above are also available on https://cdn.interactjs.io/v[VERSION]/[UNSCOPED_NAME]. You can import them in modern browser which support ES6 imports.

Ruby on Rails

Rails 5.1+ supports the yarn package manager, so you can add interact.js to you app by running yarn add interactjs. Then require the library with:

//= require interactjs/interact