vuse-gesture is a Vue 3 library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.
You can use it stand-alone, but to make the most of it you should combine it with an animation library like vue-use-spring, though you can most certainly use any other.
pnpm add vuse-gesture # or npm or yarn<script setup>
import { useSpring } from 'vue-use-spring'
import { normalizeProps, useDrag } from 'vuse-gesture'
const position = useSpring({ x: 0, y: 0 })
const bind = useDrag(({ down, movement: [mx, my] }) => {
position.x = down ? mx : 0
position.y = down ? my : 0
})
</script>
<template>
<div
id="box"
v-bind="normalizeProps(bind())"
:style="{
touchAction: 'none',
transform: `translate(${position.x}px, ${position.y}px)`,
}"
/>
</template>MIT License © 2022 Robert Soriano