GitHub - taye/interact.js: JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+) (original) (raw)

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.