Skip to content
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
TypeScript JavaScript Shell
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: reduce probot stale days of inactivity Sep 16, 2019
.travis chore(travis): deploy latest and next branches Nov 22, 2019
@interactjs chore: fix lint script Nov 20, 2019
docs docs(resizable): add aspect ratio section Nov 17, 2019
examples chore: rename packages dir to @interactjs to match scope Nov 12, 2019
img examples: reorganize Apr 14, 2018
interactjs fix(interactjs): use non relative imports and explicitly export a def… Nov 19, 2019
jsdoc chore(jsdoc): fix includes Nov 19, 2019
scripts chore: generate esnext modules with bundle --watch Nov 22, 2019
test chore: rename packages dir to @interactjs to match scope Nov 12, 2019
.babelrc.js feat: add scripts for esnext module output Nov 11, 2019
.codeclimate.yml chore(codeclimate): disable duplication plugin Jul 13, 2019
.eslintignore docs: don't include .js files Feb 2, 2019
.eslintrc.yml chore: import with relative paths Nov 11, 2019
.gitignore chore: release with detached head Nov 22, 2019
.npmignore chore: remove tests from .npmignore Mar 29, 2019
.nycrc.json chore: rename packages dir to @interactjs to match scope Nov 12, 2019
.tern-project tern-project: load packages directories egearly Jun 30, 2018
.travis.yml chore(travis): deploy latest and next branches Nov 22, 2019
CHANGELOG.md docs(changelog) Nov 20, 2019
ISSUE_TEMPLATE.md ISSUE_TEMPLATE: line wrapping Jan 31, 2017
LICENSE chore: update license Jan 28, 2019
PULL_REQUEST_TEMPLATE.md Add issue and pull request templates Jan 31, 2017
README.md docs: fix yarn install instructions Jul 15, 2019
babel-transform-for-of-array.js style: use standard/eslint-config-standard Jan 31, 2019
lerna.json chore: rename packages dir to @interactjs to match scope Nov 12, 2019
package.json chore: generate esnext modules with bundle --watch Nov 22, 2019
tsconfig.json chore: rename packages dir to @interactjs to match scope Nov 12, 2019
tslint.json chore: upgrade dependencies and linting rules Jul 14, 2019
yarn.lock chore: rename packages dir to @interactjs to match scope Nov 12, 2019

README.md

interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+).

Gitter jsDelivr Build Status Maintainability Test Coverage

Features include:

  • inertia and snapping
  • multi-touch, simultaneous interactions
  • cross browser and device, supporting the desktop and mobile versions of Chrome, Firefox and Opera as well as Internet Explorer 9+
  • interaction with SVG elements
  • being standalone and customizable
  • not modifying the DOM except to change the cursor (but you can disable that)

Installation

  • npm: npm install interactjs
  • jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
  • unpkg CDN: <script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
  • Rails 5.1+:
    1. yarn add interactjs
    2. //= require interactjs/interact
  • Webjars SBT/Play 2: libraryDependencies ++= Seq("org.webjars.npm" % "interactjs" % version)

Typescript definitions

The project is written in Typescript and the npm package includes the type definitions, but if you need the typings alone, you can install them with:

npm install --save-dev @interactjs/types

Documentation

http://interactjs.io/docs

Example

var pixelSize = 16;

interact('.rainbow-pixel-canvas')
  .origin('self')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        // snap to the corners of a grid
        targets: [
          interact.snappers.grid({ x: pixelSize, y: pixelSize }),
        ],
      })
    ],
  })
  // draw colored squares on move
  .on('dragmove', function (event) {
    var context = event.target.getContext('2d'),
        // calculate the angle of the drag direction
        dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI;

    // set color based on drag angle and speed
    context.fillStyle = 'hsl(' + dragAngle + ', 86%, '
                        + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)';

    // draw squares
    context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2,
                     pixelSize, pixelSize);
  })
  // clear the canvas on doubletap
  .on('doubletap', function (event) {
    var context = event.target.getContext('2d');

    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  });

  function resizeCanvases () {
    [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (canvas) {
      canvas.width = document.body.clientWidth;
      canvas.height = window.innerHeight * 0.7;
    });
  }

  // interact.js can also add DOM event listeners
  interact(document).on('DOMContentLoaded', resizeCanvases);
  interact(window).on('resize', resizeCanvases);

See the above code in action at https://codepen.io/taye/pen/tCKAm

License

interact.js is released under the MIT License.

You can’t perform that action at this time.