拖拽、缩放、多点触控手势,Javascript全搞定
介绍
今天要介绍的库名称为interact.js,具有惯性和捕捉功能的JavaScript拖放,调整大小和多点触摸手势库,兼容IE9+浏览器。
Github
https://github.com/taye/interact.js
基本特性
- 免费和开源
- 强大的捕捉和限制修饰
- 惯性投掷
- 多个同时互动
- 触摸和鼠标事件的统一API
- 自动滚屏
- 支持HTML和SVG
与大多数拖放库相比,interact.js采用的方法略有不同。为了尽可能多的控制,它尝试提供一个简单,灵活的API,该API提供所有需要移动元素的指针事件数据。
案例
- 拖拽
interact('.draggable')
.draggable({
// 启用惯性投掷
inertia: true,
// 将元素保留在其父元素的区域内
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
// 启用自动滚动
autoScroll: true,
listeners: {
// 在每个dragmove事件上调用此函数
move: dragMoveListener,
// 在每个dragend事件中调用此函数
end (event) {
var textEl = event.target.querySelector('p')
textEl && (textEl.textContent =
'moved a distance of ' +
(Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
Math.pow(event.pageY - event.y0, 2) | 0))
.toFixed(2) + 'px')
}
}
})
function dragMoveListener (event) {
var target = event.target
// 将拖动的位置保持在data-x / data-y属性中
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)'
// 更新位置属性
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
}
// 稍后在调整大小和手势演示中使用此功能
window.dragMoveListener = dragMoveListener
- 缩放
interact('.resize-drag')
.resizable({
//从所有边缘和角落调整大小
edges: { left: true, right: true, bottom: true, top: true },
listeners: {
move (event) {
var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0)
var y = (parseFloat(target.getAttribute('data-y')) || 0)
// 更新元素的样式
target.style.width = event.rect.width + 'px'
target.style.height = event.rect.height + 'px'
x += event.deltaRect.left
y += event.deltaRect.top
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)'
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
}
},
modifiers: [
//将边缘保留在父级内部
interact.modifiers.restrictEdges({
outer: 'parent'
}),
// 最小尺寸
interact.modifiers.restrictSize({
min: { width: 100, height: 50 }
})
],
inertia: true
})
.draggable({
listeners: { move: window.dragMoveListener },
inertia: true,
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
]
})
- SVG
<div class="star-wrapper">
<object id="star-demo" type="image/svg+xml" data="/img/star.svg" alt="embedded svg"></object>
<p style="padding: 0 5%">
The <a href="https://github.com/taye/interact.js/blob/master/examples/star/star.svg?short_path=e1e0fe0">star.svg</a>
file references interact.js as well as
<a href="https://github.com/taye/interact.js/blob/master/examples/star/index.js"> another script</a>
to enable and respond to drag events.
</p>
</div>
- 双击效果
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')
})
安装
npm install interactjs
支持typescript
npm install --save-dev @interactjs/types
总结
详细的使用方式可以参考官方详细的文档
