interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia an...

Gesture - TouchDrag and drop
taye/interact.jsinteractjs.io/interactjs

README

interact.js

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

GitterjsDelivrBuild Status

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](http://interactjs.io/#use_in_svg_files) 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](https://cdn.jsdelivr.net/npm/interactjs/): ``- [unpkg CDN](https://unpkg.com/interactjs/): ``
- 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:

  1. ```
  2. npm install --save-dev @interactjs/types
  3. ```

Documentation


http://interactjs.io/docs

Example


  1. ``` js
  2. var pixelSize = 16;

  4. interact('.rainbow-pixel-canvas')
  5.   .origin('self')
  6.   .draggable({
  7.     modifiers: [
  8.       interact.modifiers.snap({
  9.         // snap to the corners of a grid
  10.         targets: [
  11.           interact.snappers.grid({ x: pixelSize, y: pixelSize }),
  12.         ],
  13.       })
  14.     ],
  15.     listeners: {
  16.       // draw colored squares on move
  17.       move: function (event) {
  18.         var context = event.target.getContext('2d'),
  19.             // calculate the angle of the drag direction
  20.             dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI;

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

  26.         // draw squares
  27.         context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2,
  28.                          pixelSize, pixelSize);
  29.       }
  30.     }
  31.   })
  32.   // clear the canvas on doubletap
  33.   .on('doubletap', function (event) {
  34.     var context = event.target.getContext('2d');

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

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

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

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

License


interact.js is released under the MIT License.

[ijs-twitter]: https://twitter.com/interactjs
[upcoming-changes]: https://github.com/taye/interact.js/blob/main/CHANGELOG.md#upcoming-changes