pan-events
v0.1.5
Published
panstart, panmove and panend events
Downloads
359
Readme
pan-events
Add panstart, panmove and panend custom events to an element, support touch and mouse.
Demo
Open it in desktop or mobile browser: demo
Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pan-events</title>
<style>
#box {
width: 50px;
height: 50px;
background: red;
margin: 100px auto;
}
</style>
</head>
<body>
<button id="off">off</button>
<div id="box"></div>
<script type="module">
import panEvents from 'https://unpkg.com/pan-events'
const box = document.getElementById('box')
const off = panEvents(box)
box.addEventListener('panstart', e => {
console.log('panstart', e.detail)
})
box.addEventListener('panmove', e => {
console.log('panmove', e.detail)
// prevent pull-to-refresh of mobile Chrome
e.preventDefault()
box.style = `transform: translate(${e.detail.offsetX}px, ${e.detail.offsetY}px)`
})
box.addEventListener('panend', e => {
console.log('panend', e.detail)
box.style = ''
})
document.getElementById('off').addEventListener('click', off)
</script>
</body>
</html>Install
npm install pan-eventsImport
import panEvents from 'pan-events'panEvents
const off = panEvents(element)Adds panstart, panmove and panend custom events
to the element.
Returns
A function to remove listeners.
Events
After panEvents is called on an element, it will have panstart, panmove, and panend events.
element.addEventListener('panstart', event => {
console.log(event.detail)
})
element.addEventListener('panmove', event => {
console.log(event.detail)
})
element.addEventListener('panend', event => {
console.log(event.detail)
})event.detail contains:
{
screenX,
screenY,
clientX,
clientY,
pageX,
pageY
}panmove and panend have additional offsetX and offsetY properties, which are relative to the position of
panstart event.
preventDefault
If event.preventDefault() is called in panmove event, and the original event is touchmove, the touchmove
event is prevented. This is used to prevent pull-to-refresh of mobile Chrome and scrolling.