一个随意改变形状JS插件：interact.js
jopen
11年前
interact.js是一个随意改变形状插件,它非常强大的，灵活拖放，改变大小，支持现代浏览器的多点触摸手势，基于SVG的运用，能运行在包括在IE8+的浏览器.
- inertia
- snapping to a grid, custom anchors or paths.
- cross browser and device, supporting the desktop and mobile versions of Chrome, Firefox and Opera as well as Internet Explorer 8+
- interaction with SVG elements
- being lightweight and standalone (not yet another jQuery plugin)
- not modifying anything it doesn't own (except to support IE8 and to change the cursor (but you can disable that))
示例：
var // x and y to keep the position that's been dragged to x = 0, y = 0, // vendor prefixes (prefices?) transformProp = 'transform' in document.body.style? 'transform': 'webkitTransform' in document.body.style? 'webkitTransform': 'mozTransform' in document.body.style? 'mozTransform': 'oTransform' in document.body.style? 'oTransform': 'msTransform'; // make an Interactable of the document body element interact(document.body) // make a draggable of the Interactable .draggable({ // on(drag)move // could also have done interact(document.body).draggable(true).ondragmove = function... onmove: function (event) { x += event.dx; y += event.dy; // translate the document body by the change in pointer position document.body.style[transformProp] = 'translate(' + x + 'px, ' + y + 'px)'; } }) // you should really add listeners like this if you want to add multiple listeners .on('dragend', function (event) { console.log('dragged a distance of ' + Math.sqrt(event.dx*event.dx + event.dy*event.dy) + ' pixels to ' + event.pageX + ', ' + event.pageY); }) // allow inertia throwing .inertia({ resistance: 15, zeroResumeDelta: true }) // snap to the corners of the specified grid .snap({ mode: 'grid', grid: { x: 100, y: 5 }, gridOffset: { x: 20, y: 10 }, range: Infinity // can also use -1 which gets changed to Infinity }); // you can also listen to InteractEvents for every Interactable interact.on('dragstart', function (event) { console.log('starting drag from ' + event.x0 + ', ' + event.y0); });