interact.js - JavaScript drag and drop, resizing and multi-touch gestures for modern browsers

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

To get started quickly, you can use the package named interactjs on npm. This package contains all the features of the library as an ES5 bundled.
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 name	Description
`@interactjs/interact`	(required) provides the `interact()` method
`@interactjs/actions`	Drag, resize, gesture actions
`@interactjs/auto-start`	Start actions with pointer down, move sequence
`@interactjs/modifiers`	Snap, restrict, etc. modifiers
`@interactjs/snappers`	Provides `interact.snappers.grid()` utility
`@interactjs/inertia`	Drag and resize inertia-like throwing
`@interactjs/reflow`	`interactable.reflow(action)` method to trigger modifiers and event listeners
`@interactjs/dev-tools`	Console 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