interact.js README

The project's README from github.com/taye/interact.js. As one markdown file: 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

Features include:

Installation

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 }),
        ],
      })
    ],
    listeners: {
      // draw colored squares on move
      move: 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.

interact.js (taye/interact.js)

Searching Database…

12.9K ·GitHub
Interact.js
What is this?interact.js is a JavaScript library that adds drag and drop, resizing, and multi-touch gesture support to web elements, with built-in inertia and snapping effects.
Is it a framework or a library?It's a standalone library, not a framework: it doesn't touch the DOM besides optionally changing the cursor, and it works alongside any other code or framework.
How do I add it to a project?Install via npm with 'npm install interactjs', or pull it from the jsDelivr/unpkg CDN; there's also a Rails 5.1+ gem path (yarn add interactjs plus a require line) and a Webjars dependency for SBT/Play 2.
Do I need TypeScript to use it?No. It's written in TypeScript and ships type definitions in the npm package, but you can also install the typings standalone if you just want them for a plain JS project.
Does it work on older browsers like IE?Yes, it specifically supports IE9 and up in addition to modern desktop and mobile versions of Chrome, Firefox, and Opera.
Does it work with touch devices and SVG?Yes, it handles multi-touch and simultaneous interactions across devices, and it can interact with SVG elements directly.
What does the inertia and snapping feature actually do?Inertia lets dragged or resized elements keep moving briefly after release like a physical object would, while snapping locks elements to a grid or specific points during interaction.
Can I run multiple drag/resize interactions on the page at once?Yes, it supports multi-touch with simultaneous interactions, so multiple gestures can be handled at the same time.
Is there a live demo to see it in action?Yes, the README links to a working example page showing the library's code running live.
What are similar projects?dragula, lenis, headroom.js, slick, filepond, react-sortable-hoc, Sortable, draggable
Which topics is it in?snap, touch, drag-and-drop, responsive, animation, css, browser, mobile, ui, web-development, gui, npm
Creator
taye
Size
29.7 MB
Stars
12.9K
Updated
CommitAug 01
Age
13y
Commits · 90 Days