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

varpixelSize=16;interact('.rainbow-pixel-canvas').origin('self').draggable({modifiers: [interact.modifiers.snap({// snap to the corners of a gridtargets: [interact.snappers.grid({x: pixelSize,y: pixelSize}),],})],listeners: {// draw colored squares on movemove: function(event){varcontext=event.target.getContext('2d'),// calculate the angle of the drag directiondragAngle=180*Math.atan2(event.dx,event.dy)/Math.PI;// set color based on drag angle and speedcontext.fillStyle='hsl('+dragAngle+', 86%, '+(30+Math.min(event.speed/1000,1)*50)+'%)';// draw squarescontext.fillRect(event.pageX-pixelSize/2,event.pageY-pixelSize/2,pixelSize,pixelSize);}}})// clear the canvas on doubletap.on('doubletap',function(event){varcontext=event.target.getContext('2d');context.clearRect(0,0,context.canvas.width,context.canvas.height);});functionresizeCanvases(){[].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 listenersinteract(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.