Directive
Since v1.1 VueDragToScroll introduced the v-directive: an incredibly straightforward way to implement drag to scroll to your components. The downside: it's not configurable. The upside: it's plug-and-play!
This means that it's recommended to not use any events inside the scroll container as they will be fired on every drag stop. See this effect when starting your drag on box 3:
Demo
1
2
3 will fire
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Usage
vue
<script setup>
import { dragToScroll } from "vue-dragtoscroll";
const vDragToScroll = dragToScroll;
const showAlert = (i) => i === 3 && alert(i);
</script>
<template>
<div v-drag-to-scroll class="container">
<div v-for="i in 20" :key="i" class="container-item" @click="showAlert(i)">
{{ i === 3 ? '3 will fire' : i }}
</div>
</div>
</template>