🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Interact.js is a powerful, flexible, snappable drag and drop, resizing and multi-touch gestures for modern browsers (and also IE8+) javascript library.Features:snapping to a grid, custom anchors or paths.cross browser and device, supporting {Chrome,Firefox,Opera}’ ‘{mobile,desktop}’, ‘ and Internet Explorer 8+interaction with SVG elementsbeing standalone (not yet another jQuery plugin)introducing 0 additional DOM elementshaving(a). fluent ().interfacenot modifying anything it doesn’t own (except to support IE8 and to change the cursor (but you can disable that))Demos : Demo 1 Demo 2 Demo 3 Demo 4

Core Java Script Drag_Drop SVG Tutorial

Documentation

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
  • 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 install 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 }),         ],       })     ],   })   // 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.


You May Also Like