Skip to content
Get packs

interact.js

JavaScript library for drag, drop, resize and multi-touch gestures in web pages.

GitHub Download source
Stars
12.9k
Forks
804
Licence
MIT
Language
TypeScript
Last update
3 months ago
Type
Library

What it is

interact.js is a JavaScript library that lets web developers make page elements draggable, resizable, and responsive to multi-touch gestures. It supports inertia (continued motion after release) and snapping to targets such as a grid. It is described as standalone and does not change the page structure beyond the cursor unless configured otherwise.

  • Make cards or list items draggable and reorderable on a web page
  • Snap dragged elements to a grid for layout or drawing tools
  • Add pinch or multi-touch resizing to images or panels
  • Let users drag elements inside SVG graphics

Great for

  • Web developers building drag-and-drop interfaces
  • Developers who need touch and mouse gesture support in one library
  • Projects that must support older browsers such as Internet Explorer 9+
  • Developers building interactive SVG or canvas-based tools

Not ideal for

  • Non-programmers, since it requires writing JavaScript code to use
  • Projects needing a ready-made UI component with no custom code, because it is a low-level library
  • Teams that need a React or Vue-specific wrapper, since the README does not describe one
Step-by-step guide: how to use interact.jsInstall, first run, examples, tips and FAQs
interact.js alternativesinteract.js vs SwiperDragula vs interact.jsdnd-kit vs interact.jsinteract.js vs Lenisinteract.js vs Muuriinteract.js vs Moveable

How to get it

  1. 1

    Install with a package manager

    Install via npm

    npm install interactjs
  2. 2

    Run it

    • Install the package with npm or load it from a CDN script tag.
    • Select the element you want to make interactive using interact('.selector').
    • Enable behavior such as .draggable() and attach listeners like move.
    • Open the page in a browser and test drag or touch interaction.
  3. 3

    Get the most out of it

    • Use the snap modifier with interact.snappers.grid to align elements to a grid, as shown in the README example.
    • Use the origin option to set the coordinate origin for an element.
    • Attach DOM event listeners through interact(document) or interact(window), as the README example demonstrates.
    • Consult the official documentation at interactjs.io/docs for full options.

Downloads

Source code (.zip)main branch · straight from GitHubOfficial website & docsinteractjs.io/

Strengths

  • Supports both desktop and mobile browsers, including Internet Explorer 9+ per the README
  • Includes inertia and snapping features out of the box
  • Written in TypeScript with type definitions shipped in the npm package

Trade-offs

  • Requires JavaScript coding knowledge to use and configure
  • The README is truncated here, so detailed API behavior must be checked in the external documentation

How it compares

ProjectStarsTypeLevelUpdatedBest for
interact.js (this)12.9kLibraryintermediate3 months agoWeb developers building drag-and-drop interfaces
muuri10.9kLibraryintermediate2.5 years agoFront-end developers building card or photo grids that need drag and drop or filtering
swiper41.9kLibraryintermediate6 days agoFront-end developers adding a swipeable slider or image gallery to a website
lenis17kLibrarybeginner7 days agoWeb developers adding smooth scrolling to a marketing or portfolio site
Sortable31.2kLibrarybeginner8 months agoWeb developers adding reorderable lists to a site or app
dragula22.1kLibrarybeginner2.4 years agoFront-end developers who want drag-and-drop without a large framework

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.