JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Interact.js

    Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+)
    Filed under  › 

    • 🔾77%Overall
    • 8,135
    • 17 hours
    • 🕩614
    • 👥1

    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@next
    • jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/interactjs@next/dist/interact.min.js"></script>
    • unpkg CDN: <script src="https://unpkg.com/interactjs@next/dist/interact.min.js"></script>
    • Webjars SBT/Play 2: libraryDependencies ++= Seq("org.webjars.npm" % "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

    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: [{
          // snap to the corners of a grid
          type: 'snap',
          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.

    Show All