1 | <a href="http://interactjs.io"><img alt="interact.js" src="https://c4d6f7d727e094887e93-4ea74b676357550bd514a6a5b344c625.ssl.cf2.rackcdn.com/ijs-solid.svg" height="70px" width="100%"></a>
|
2 |
|
3 | <h2>
|
4 | JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+).
|
5 | </h2>
|
6 |
|
7 | <div align="center">
|
8 | <a href="https://gitter.im/taye/interact.js"><img src="https://badges.gitter.im/taye/interact.js.svg" alt="Gitter"></a>
|
9 | <a href="https://www.jsdelivr.com/package/npm/interactjs"><img src="https://data.jsdelivr.com/v1/package/npm/interactjs/badge" alt="jsDelivr"></a>
|
10 | <a href="https://travis-ci.org/taye/interact.js"><img src="https://travis-ci.org/taye/interact.js.svg?branch=master" alt="Build Status"></a>
|
11 | <a href="https://codeclimate.com/github/taye/interact.js/test_coverage"><img src="https://api.codeclimate.com/v1/badges/0168aeaeed781a949088/test_coverage"/></a>
|
12 | </div>
|
13 | <br>
|
14 |
|
15 | Features include:
|
16 |
|
17 | - **inertia** and **snapping**
|
18 | - **multi-touch**, simultaneous interactions
|
19 | - cross browser and device, supporting the **desktop and mobile** versions of
|
20 | Chrome, Firefox and Opera as well as **Internet Explorer 9+**
|
21 | - interaction with [**SVG**](http://interactjs.io/#use_in_svg_files) elements
|
22 | - being **standalone and customizable**
|
23 | - **not modifying the DOM** except to change the cursor (but you can disable
|
24 | that)
|
25 |
|
26 | Installation
|
27 | ------------
|
28 |
|
29 | * [npm](https://www.npmjs.org/): `npm install interactjs`
|
30 | * [jsDelivr CDN](https://cdn.jsdelivr.net/npm/interactjs/): `<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>`
|
31 | * [unpkg CDN](https://unpkg.com/interactjs/): `<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>`
|
32 | * [Rails 5.1+](https://rubyonrails.org/):
|
33 | 1. `yarn add interactjs`
|
34 | 2. `//= require interactjs/interact`
|
35 | * [Webjars SBT/Play 2](https://www.webjars.org/): `libraryDependencies ++= Seq("org.webjars.npm" % "interactjs" % version)`
|
36 |
|
37 | ### Typescript definitions
|
38 |
|
39 | The project is written in Typescript and the npm package includes the type
|
40 | definitions, but if you need the typings alone, you can install them with:
|
41 |
|
42 | ```
|
43 | npm install --save-dev @interactjs/types
|
44 | ```
|
45 |
|
46 | Documentation
|
47 | -------------
|
48 |
|
49 | http://interactjs.io/docs
|
50 |
|
51 | Example
|
52 | -------
|
53 |
|
54 | ```javascript
|
55 | var pixelSize = 16;
|
56 |
|
57 | interact('.rainbow-pixel-canvas')
|
58 | .origin('self')
|
59 | .draggable({
|
60 | modifiers: [
|
61 | interact.modifiers.snap({
|
62 | // snap to the corners of a grid
|
63 | targets: [
|
64 | interact.snappers.grid({ x: pixelSize, y: pixelSize }),
|
65 | ],
|
66 | })
|
67 | ],
|
68 | listeners: {
|
69 | // draw colored squares on move
|
70 | move: function (event) {
|
71 | var context = event.target.getContext('2d'),
|
72 | // calculate the angle of the drag direction
|
73 | dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI;
|
74 |
|
75 | // set color based on drag angle and speed
|
76 | context.fillStyle = 'hsl(' + dragAngle + ', 86%, '
|
77 | + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)';
|
78 |
|
79 | // draw squares
|
80 | context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2,
|
81 | pixelSize, pixelSize);
|
82 | }
|
83 | }
|
84 | })
|
85 | // clear the canvas on doubletap
|
86 | .on('doubletap', function (event) {
|
87 | var context = event.target.getContext('2d');
|
88 |
|
89 | context.clearRect(0, 0, context.canvas.width, context.canvas.height);
|
90 | });
|
91 |
|
92 | function resizeCanvases () {
|
93 | [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (canvas) {
|
94 | canvas.width = document.body.clientWidth;
|
95 | canvas.height = window.innerHeight * 0.7;
|
96 | });
|
97 | }
|
98 |
|
99 | // interact.js can also add DOM event listeners
|
100 | interact(document).on('DOMContentLoaded', resizeCanvases);
|
101 | interact(window).on('resize', resizeCanvases);
|
102 | ```
|
103 |
|
104 | See the above code in action at https://codepen.io/taye/pen/tCKAm
|
105 |
|
106 | License
|
107 | -------
|
108 |
|
109 | interact.js is released under the [MIT License](http://taye.mit-license.org).
|
110 |
|
111 | [ijs-twitter]: https://twitter.com/interactjs
|
112 | [upcoming-changes]: https://github.com/taye/interact.js/blob/master/CHANGELOG.md#upcoming-changes
|