corrade-nucleus-nucleons – Blame information for rev 26
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
25 | office | 1 | <a href="http://interactjs.io"><img alt="interact.js" src="https://c4d6f7d727e094887e93-4ea74b676357550bd514a6a5b344c625.ssl.cf2.rackcdn.com/ijs-anim.svg" height="131px" width="100%"></a> |
2 | |||
3 | JavaScript drag and drop, resizing and multi-touch gestures with inertia and |
||
4 | snapping for modern browsers (and also IE8+). |
||
5 | |||
6 | [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/taye/interact.js) |
||
7 | |||
8 | Features include: |
||
9 | |||
10 | - **inertia** and **snapping** |
||
11 | - **multiple interactions** |
||
12 | - cross browser and device, supporting the **desktop and mobile** versions of |
||
13 | Chrome, Firefox and Opera as well as **Internet Explorer 8+** |
||
14 | - interaction with [**SVG**](http://interactjs.io/repo/demo/star.svg) elements |
||
15 | - being **lightweight and standalone** (not _yet another_ jQuery plugin) |
||
16 | - **not modifying the DOM** except to support IE8 and to change the cursor |
||
17 | (but you can disable that) |
||
18 | |||
19 | Installation |
||
20 | ------------ |
||
21 | |||
22 | * [Bower](http://bower.io/): `bower install interactjs` |
||
23 | * [npm](https://www.npmjs.org/): `npm install interactjs` |
||
24 | * Direct download the latest version: http://interactjs.io/#download |
||
25 | * [jsDelivr CDN](http://www.jsdelivr.com/#!interact.js): `<script src="//cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>` |
||
26 | * [cdnjs CDN](https://cdnjs.com/libraries/interact.js): `<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>` |
||
27 | (replace `VERSION` with the SemVer you want to use) |
||
28 | |||
29 | Documentation |
||
30 | ------------- |
||
31 | |||
32 | Visit http://interactjs.io/docs for the API documentation. |
||
33 | |||
34 | Example |
||
35 | ------- |
||
36 | |||
37 | ```javascript |
||
38 | var pixelSize = 16; |
||
39 | |||
40 | interact('.rainbow-pixel-canvas') |
||
41 | .origin('self') |
||
42 | .draggable({ |
||
43 | snap: { |
||
44 | targets: [ interact.createSnapGrid({ |
||
45 | x: pixelSize, y: pixelSize |
||
46 | }) ] |
||
47 | }, |
||
48 | // allow multiple drags on the same element |
||
49 | maxPerElement: Infinity |
||
50 | }) |
||
51 | // draw colored squares on move |
||
52 | .on('dragmove', function (event) { |
||
53 | var context = event.target.getContext('2d'), |
||
54 | // calculate the angle of the drag direction |
||
55 | dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI; |
||
56 | |||
57 | // set color based on drag angle and speed |
||
58 | context.fillStyle = 'hsl(' + dragAngle + ', 86%, ' |
||
59 | + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)'; |
||
60 | |||
61 | // draw squares |
||
62 | context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2, |
||
63 | pixelSize, pixelSize); |
||
64 | }) |
||
65 | // clear the canvas on doubletap |
||
66 | .on('doubletap', function (event) { |
||
67 | var context = event.target.getContext('2d'); |
||
68 | |||
69 | context.clearRect(0, 0, context.canvas.width, context.canvas.height); |
||
70 | }); |
||
71 | |||
72 | function resizeCanvases () { |
||
73 | [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (canvas) { |
||
74 | canvas.width = document.body.clientWidth; |
||
75 | canvas.height = window.innerHeight * 0.7; |
||
76 | }); |
||
77 | } |
||
78 | |||
79 | // interact.js can also add DOM event listeners |
||
80 | interact(document).on('DOMContentLoaded', resizeCanvases); |
||
81 | interact(window).on('resize', resizeCanvases); |
||
82 | ``` |
||
83 | |||
84 | See the above code in action at http://codepen.io/taye/pen/YPyLxE |
||
85 | |||
86 | License |
||
87 | ------- |
||
88 | |||
89 | interact.js is released under the [MIT License](http://taye.mit-license.org). |
||
90 | |||
91 | [ijs-twitter]: https://twitter.com/interactjs |
||
92 | [upcoming-changes]: https://github.com/taye/interact.js/blob/master/CHANGELOG.md#upcoming-changes |