interact.js

interact.js 介绍

interact.js是一个随意改变形状插件,它非常强大的，灵活拖放，改变大小，支持现代浏览器的多点触摸手势，基于SVG的运用，能运行在包括在IE8+的浏览器。  功能包括：

惯性和对齐

多点触控，同步互动

跨浏览器和设备，支持Chrome，Firefox和Opera以及Internet Explorer 9+的桌面和移动版本

与SVG元素的交互

是独立的，可定制

不修改DOM除了更改光标（但你可以禁用它） 

安装

npm install interactjs

例子

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,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);

网站地址:http://interactjs.io/

GitHub:https://github.com/taye/interact.js

网站描述:用于拖放，调整大小Js插件

interact.js

官方网站：http://interactjs.io/