Guide · Open source
How to use interact.js: install and add drag, resize and gestures
Updated · written with AI from the project's own documentation and checked against our catalogue data
interact.js is a JavaScript library for making page elements draggable, resizable and responsive to multi-touch gestures, with support for inertia and snapping. It is aimed at web developers, and it also supports Internet Explorer 9+. After this guide you will know how to install it, set up a draggable element, add snapping, and find where the full documentation lives.
interact.jstaye/interact.js · ★ 12.9k · MIT Install options & downloads Quick start
- 1Install the package. Run npm install interactjs in your project, or add the jsDelivr or unpkg script tag.
- 2Select your elements. Call interact() with a CSS selector for the elements you want to control.
- 3Enable dragging. Chain draggable() and add a move listener that reads event.dx and event.dy.
- 4Add snapping. Add the snap modifier with a grid snapper if you want positions to lock to a grid.
- 5Handle other events. Use .on() for events such as doubletap, or attach listeners to document or window.
- 6Check the docs. Read the official documentation at interactjs.io/docs for the full set of options.
Install interact.js with npm or a CDN
The most common route is the npm package. Run the install command in your project folder.
The README also lists CDN options. The jsDelivr and unpkg links both load a dist/interact.min.js file with a script tag. Rails 5.1+ users can add it with yarn and a require line, and Webjars users can add it as an SBT/Play 2 dependency.
- npm: install the interactjs package
- jsDelivr or unpkg: add a script tag pointing to dist/interact.min.js
- Rails 5.1+: yarn add interactjs, then require interactjs/interact
npm install interactjsUse TypeScript types if you need them
The project is written in TypeScript and the npm package includes its type definitions. If you only need the typings, the README says you can install them separately.
npm install --save-dev @interactjs/typesMake an element draggable and add snapping
Call interact() with a CSS selector, then chain draggable() with a listeners object. The move listener receives an event whose dx and dy values describe the movement since the last event.
To keep dragged items on a grid, add the snap modifier and pass it a grid snapper with x and y sizes. The README example snaps to a 16 pixel grid and draws on a canvas during the drag.
The README example also shows origin('self') and a doubletap handler that clears the canvas.
- interact(selector) selects the elements to control
- draggable({ listeners: { move } }) runs code while the element moves
- modifiers with interact.modifiers.snap and interact.snappers.grid snaps the position
interact('.rainbow-pixel-canvas')
.origin('self')
.draggable({
modifiers: [
interact.modifiers.snap({
targets: [
interact.snappers.grid({ x: 16, y: 16 }),
],
})
],
listeners: {
move: function (event) {
// event.dx and event.dy give the movement since the last event
}
}
})
.on('doubletap', function (event) {
// handle a double tap
});Attach event listeners to the page and window
interact.js can also listen to DOM events. The README example uses interact(document) to run a setup function on DOMContentLoaded and interact(window) to rerun it on resize. This is useful when your canvas or layout depends on window size.
interact(window).on('resize', resizeCanvases);Know what interact.js changes on the page
According to the README, interact.js is standalone and does not modify the DOM, except to change the cursor. The README says you can disable the cursor change. Check this behaviour in your own project if your page relies on exact cursor styles.
- Works with SVG elements, as listed in the features
- Supports desktop and mobile Chrome, Firefox and Opera, plus Internet Explorer 9+
Where to find full documentation
The README links to the documentation at interactjs.io/docs and to a CodePen demo of the example. For options beyond the README, such as the full list of modifiers and listeners, use the official docs rather than guessing.
What people use it for
- Drag-and-drop interfaces in a web app
- Drawing or painting tools on a canvas that snap to a grid
- Resizing panels or boxes with a mouse or touch
- Interactive SVG diagrams where elements must move
- Projects that must still support Internet Explorer 9+
Frequently asked questions
How do I install interact.js?
Run npm install interactjs if you use npm. You can also load it from the jsDelivr or unpkg CDN with a script tag pointing to dist/interact.min.js.
Is interact.js free to use?
Yes. interact.js is released under the MIT License, as stated in the README and the licence section.
Does interact.js work in Internet Explorer?
The README says it supports Internet Explorer 9 and later, along with current desktop and mobile versions of Chrome, Firefox and Opera.
Does interact.js need a framework like React or Vue?
The README does not list any framework prerequisites and does not describe a React or Vue wrapper. You use it with plain JavaScript.
Can interact.js make an element snap to a grid?
Yes. The README example uses the snap modifier with interact.snappers.grid to snap to a 16 pixel grid.
What are good alternatives to interact.js?
The source lists SortableJS as a comparable project, and names Hammer.js, Draggabilly and Muuri as alternatives. Pick based on whether you need gestures, sortable lists or grid layouts.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
interact.js suits web developers who need drag, resize and multi-touch gestures in one library, especially if they must support older browsers like IE9+. It is a low-level library, so non-programmers or teams wanting a ready-made UI component should look at other options.
Install options & downloads