Package - interactjs

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

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

Bower: bower install interactjs
npm: npm install interactjs
Webjars SBT/Play 2: libraryDependencies ++= Seq("org.webjars.bower" % "interactjs" % version)
Direct download the latest version: http://interactjs.io/#download
- Rails 4 app development (using Rails Asset Pipeline)
  - Download the file interact.js (development version) into a new sub-directory: vendor/assets/javascripts/interact
  - Add //= require interact/interact in app/assets/javascripts/application.js (above //= require_tree .)
  - Restart the Rails server
jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/interactjs@1.3/dist/interact.min.js"></script>
unpkG CDN: <script src="https://unpkg.com/interactjs@1.3/dist/interact.min.js"></script>

Documentation

Visit http://interactjs.io/docs for the API documentation.

Example

var pixelSize = 16;

interact('.rainbow-pixel-canvas')
  .origin('self')
  .draggable({
    snap: {
        targets: [ interact.createSnapGrid({
          x: pixelSize, y: pixelSize
        }) ]
    },
    // allow multiple drags on the same element
    maxPerElement: Infinity
  })
  // 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 http://codepen.io/taye/pen/YPyLxE

License

interact.js is released under the MIT License.

Current Tags

1.10.27 ... latest (8 months ago)
1.8.3 ... next (5 years ago)

Installation

Documentation

Example

License

Current Tags

170 Versions