nvdnkpr / interact.js

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

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/[email protected]/dist/interact.min.js"></script>
• unpkG CDN: <script src="https://unpkg.com/[email protected]/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({
    modifiers: [
      interact.modifiers.snap({
        targets: [ interact.snappers.grid({
          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.