interactjs

What is interactjs?

Interact.js is a JavaScript library for drag and drop, resizing, and multi-touch gestures for modern browsers. It provides a simple and flexible API to create interactive user interfaces.

What are interactjs's main functionalities?

Drag and Drop

This feature allows elements to be draggable. The code sample demonstrates how to make elements with the class 'draggable' draggable within their parent container.

document.addEventListener('DOMContentLoaded', function () {
  interact('.draggable').draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    listeners: {
      move: dragMoveListener
    }
  });

  function dragMoveListener(event) {
    var target = event.target;
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
});

Resizable Elements

This feature allows elements to be resizable. The code sample demonstrates how to make elements with the class 'resizable' resizable within their parent container.

document.addEventListener('DOMContentLoaded', function () {
  interact('.resizable').resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move(event) {
        let { x, y } = event.target.dataset;
        x = (parseFloat(x) || 0) + event.deltaRect.left;
        y = (parseFloat(y) || 0) + event.deltaRect.top;
        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        });
        Object.assign(event.target.dataset, { x, y });
      }
    },
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: 'parent',
        endOnly: true
      }),
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 }
      })
    ],
    inertia: true
  });
});

Gestures

This feature allows elements to respond to multi-touch gestures like pinch and rotate. The code sample demonstrates how to make elements with the class 'gesture-area' respond to these gestures.

document.addEventListener('DOMContentLoaded', function () {
  interact('.gesture-area').gesturable({
    listeners: {
      start(event) {
        console.log(event.type, event.target);
      },
      move(event) {
        var target = event.target;
        var scale = (parseFloat(target.getAttribute('data-scale')) || 1) * (1 + event.ds);
        var angle = (parseFloat(target.getAttribute('data-angle')) || 0) + event.da;
        target.style.transform = 'scale(' + scale + ') rotate(' + angle + 'deg)';
        target.setAttribute('data-scale', scale);
        target.setAttribute('data-angle', angle);
      },
      end(event) {
        console.log(event.type, event.target);
      }
    }
  });
});

Other packages similar to interactjs

dragula

Dragula is a drag-and-drop library that focuses on simplicity and ease of use. It provides a straightforward API for creating drag-and-drop interfaces but lacks the advanced features like resizing and gestures that Interact.js offers.

react-draggable

React-Draggable is a React component for making elements draggable. It is specifically designed for React applications and offers a simpler API compared to Interact.js, but it does not support resizing or gestures.

jquery-ui

jQuery UI is a popular library that provides a wide range of UI interactions, including drag-and-drop, resizing, and more. It is more heavyweight compared to Interact.js and requires jQuery as a dependency.

README

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

• npm: npm install interactjs
• jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
• unpkg CDN: <script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
• 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:

npm install --save-dev @interactjs/types

Documentation

http://interactjs.io/docs

Example

var pixelSize = 16;

interact('.rainbow-pixel-canvas')
  .origin('self')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        // snap to the corners of a grid
        targets: [
          interact.snappers.grid({ x: pixelSize, y: pixelSize }),
        ],
      })
    ],
    listeners: {
      // draw colored squares on move
      move: 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.