interact.js
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
A standalone JavaScript library that adds drag-and-drop, resizing, and multi-touch gesture support to any web page element, with inertia and snapping, and no jQuery required.
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.
Where it fits
- Make UI elements draggable with snap-to-grid for a pixel editor or layout builder.
- Add pinch-to-zoom or swipe gesture support to a touchscreen web app.
- Build a resizable panel interface where users drag edges to resize sections.
- Create natural inertia-based dragging for a card-sorting or Kanban-style app.