taye/interact.js

★ 12,905TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((interact.js))
    Gesture Types
      Drag and Drop
      Resize
      Multi-touch
    Features
      Inertia
      Snapping
      SVG Support
    Compatibility
      Desktop Browsers
      Mobile Browsers
      IE9 Plus
    Setup
      npm install
      CDN link

mindmap root((interact.js)) Gesture Types Drag and Drop Resize Multi-touch Features Inertia Snapping SVG Support Compatibility Desktop Browsers Mobile Browsers IE9 Plus Setup npm install CDN link

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Make UI elements draggable with snap-to-grid for a pixel editor or layout builder.

USE CASE 2

Add pinch-to-zoom or swipe gesture support to a touchscreen web app.

USE CASE 3

Build a resizable panel interface where users drag edges to resize sections.

USE CASE 4

Create natural inertia-based dragging for a card-sorting or Kanban-style app.

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Free to use in personal and commercial projects with no restrictions other than keeping the license notice.

In plain English

interact.js is a JavaScript library that adds drag and drop, resizing, and multi-touch gesture support to web pages. If you want users to be able to drag elements around a page, resize boxes by pulling their edges, or respond to pinch and swipe gestures on a touchscreen, this library provides the machinery to make that work without having to build it from scratch. Some of the features the README highlights are worth explaining. Inertia means that when a user lets go of a dragged element, it keeps moving and gradually slows down rather than stopping instantly, which feels more natural. Snapping means you can configure elements to snap to a grid or specific points as they are dragged, which is useful for applications like pixel editors or layout builders. Multi-touch support means it can track multiple fingers simultaneously, so two-finger gestures work alongside single-finger drags. The library is designed to be standalone, meaning it does not depend on jQuery or any other library. It works across modern desktop and mobile browsers including Chrome, Firefox, and Opera, and also supports older browsers down to Internet Explorer 9. It can also be applied to SVG elements, not just standard HTML elements. One design choice the README calls out is that the library deliberately does not rearrange or rewrite your page's structure while it works, which helps keep your layout predictable. It is written in TypeScript and ships with type definitions for developers who use TypeScript in their own projects. Installation is straightforward via npm or by loading it from a CDN link. The README includes a short code example showing how to make a canvas element draggable with grid snapping. The project is released under the MIT license, meaning it is free to use in both personal and commercial projects.

Copy-paste prompts

Prompt 1

Using interact.js, write code to make a div draggable with snap-to-grid snapping in increments of 20px.

Prompt 2

Show me how to use interact.js to make an element resizable by dragging its bottom-right corner.

Prompt 3

How do I detect a two-finger pinch gesture with interact.js and respond with a zoom scale factor?

Prompt 4

I want to build a drag-and-drop list with interact.js where dropped items snap into fixed slots. Write the setup code.

Prompt 5

How do I apply interact.js dragging to an SVG element instead of a regular HTML div?

Open on GitHub → Explain another repo

← taye on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.