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  › 

    • 🔾78%Overall
    • 6,036
    • 1.2 days
    • 🕩408
    • 👥4

    interact.js

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

    Gitter Build Status Test Coverage

    Features include:

    • inertia and snapping
    • multiple interactions
    • cross browser and device, supporting the desktop and mobile versions of Chrome, Firefox and Opera as well as Internet Explorer 8+
    • interaction with SVG elements
    • being lightweight and standalone (not yet another jQuery plugin)
    • not modifying the DOM except to support IE8 and to change the cursor (but you can disable that)

    Installation

    • Bower: bower install interactjs
    • npm: npm install interactjs
    • 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="//cdn.jsdelivr.net/interact.js/1.2.8/interact.min.js"></script>
    • cdnjs CDN: <script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/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.

    Show All