Composable
The composable enables you to configure the drag to scroll behavior to your own likings. The composable also exposes the isDragging ref so you can use this ref in your events and make sure click events only trigger when the user is not dragging.
Demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Usage
vue
<script setup>
import { useDragToScroll } from "vue-dragtoscroll";
const scrollContainer = ref(null);
const { isDragging } = useDragToScroll(scrollContainer);
const showAlert = (i) => alert(i);
</script>
<template>
<div ref="scrollContainer">
<div v-for="i in 20" :key="i" @click="!isDragging && showAlert(i)">
{{ i }}
</div>
</div>
</template>