本期介绍一个前端拖拽插件interact.js，JavaScript拖放、调整大小和多点触控手势，适用于浏览器(以及IE9+).
interact.js采用了一种与大多数拖放库略有不同的方法。为了尽可能多地提供控制，它尝试提供一个简单、灵活的API，该API为您提供移动元素所需的所有拖拽api
安装
npm install interactjs
CDN直接引入
<script src='interact.min.js'></script>
使用教程
拖拽
拖拽是interactive .js提供的最简单的动作。要使元素可拖放，请创建一个与您想要的目标可交互的元素，然后使用您需要的选项调用拖放方法。
<div class="draggable"> Draggable Element </div>const position = { x: 0, y: 0 }interact('.draggable').draggable({ listeners: { start (event) { console.log(event.type, event.target) }, move (event) { position.x += event.dx position.y += event.dy event.target.style.transform = `translate(${position.x}px, ${position.y}px)` }, }})
dragmove还有dragEnter和dragLeave 两个事件
调整大小
Resize事件有rect和deltaRect属性。rect在每个resizemove事件上更新，deltaRect中的值反映了更改。在resizestart中，rect将与interactable返回的rect相同。getrect (element)和deltaRect将具有全零属性。
interact('.resizable') .resizable({ edges: { top: true, left: true, bottom: true, right: true }, listeners: { move: function (event) { let { x, y } = event.target.dataset x = (parseFloat(x) || 0) + event.deltaRect.left y = (parseFloat(y) || 0) + event.deltaRect.top Object.assign(event.target.style, { width: `${event.rect.width}px`, height: `${event.rect.height}px`, transform: `translate(${x}px, ${y}px)` }) Object.assign(event.target.dataset, { x, y }) } } })
拖动和放置
dropzone定义了可拖放目标的元素，以及哪些元素可以被接受。和拖放事件一样，拖放事件不会修改DOM来重新创建父元素。如果需要，您必须在自己的事件监听器中这样做。
Dropzone Events
interact(dropTarget) .dropzone({ ondrop: function (event) { alert(event.relatedTarget.id + ' was dropped into ' + event.target.id) } }) .on('dropactivate', function (event) { event.target.classList.add('drop-activated') })
accept
dropzone接受选项是一个CSS选择器或元素，它必须匹配被拖动的元素，以便触发拖放事件。
interact('.dropzone').dropzone({ accept: '.drag0, .drag1',});
checker
checker选项是一个函数，你可以设置它来另外检查一个拖动的元素是否可以拖放到dropzone中。
interact(target).dropzone({ checker: function ( dragEvent, // related dragmove or dragend event, // Touch, Pointer or Mouse Event dropped, // bool default checker result dropzone, // dropzone Interactable dropzoneElement, // dropzone element draggable, // draggable Interactable draggableElement // draggable element ) { // only allow drops into empty dropzone elements return dropped && !dropElement.hasChildNodes(); }});
多点触摸旋转(仅触摸屏)
当两个手指移动时，手势事件被触发。在手势事件中，页面和客户端坐标是触摸坐标的平均值，速度是根据这些平均值计算的。
var angle = 0interact('#rotate-area').gesturable({ listeners: { move (event) { var arrow = document.getElementById('arrow') angle += event.da arrow.style.webkitTransform = arrow.style.transform = 'rotate(' + angle + 'deg)' document.getElementById('angle-info').textContent = angle.toFixed(2) + '\u00b0' } }})
记住使用CSS touch-action: none来防止当用户用触摸指针拖动时浏览器进行平移，user-select: none来禁用文本选择。
双指放大(仅触摸屏)
和旋转方法一样
var angleScale = { angle: 0, scale: 1}var gestureArea = document.getElementById('gesture-area')var scaleElement = document.getElementById('scale-element')var resetTimeoutinteract(gestureArea) .gesturable({ listeners: { start (event) { angleScale.angle -= event.angle clearTimeout(resetTimeout) scaleElement.classList.remove('reset') }, move (event) { // document.body.appendChild(new Text(event.scale)) var currentAngle = event.angle + angleScale.angle var currentScale = event.scale * angleScale.scale scaleElement.style.webkitTransform = scaleElement.style.transform = 'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')' // uses the dragMoveListener from the draggable demo above dragMoveListener(event) }, end (event) { angleScale.angle = angleScale.angle + event.angle angleScale.scale = angleScale.scale * event.scale resetTimeout = setTimeout(reset, 1000) scaleElement.classList.add('reset') } } }) .draggable({ listeners: { move: dragMoveListener } })function reset () { scaleElement.style.webkitTransform = scaleElement.style.transform = 'scale(1)' angleScale.angle = 0 angleScale.scale = 1}
Tap, doubletap and hold
手指事件: 单击 双击 长按
interact('.tap-target') .on('tap', function (event) { event.currentTarget.classList.toggle('switch-bg') event.preventDefault() }) .on('doubletap', function (event) { event.currentTarget.classList.toggle('large') event.currentTarget.classList.remove('rotate') event.preventDefault() }) .on('hold', function (event) { event.currentTarget.classList.toggle('rotate') event.currentTarget.classList.remove('large') })
感谢阅读，了解更多API是如何工作的，请阅读文档，文档地址：interactjs.io/docs/events…
