Vue.js Drag To Scroll Component – vue-dragscroll

vue-dragscroll is a micro vue.js 3 directive that enables scrolling via holding the mouse button (“drag and drop” or “click and hold” style).

How to use it:

1. Import and register the vue-dragscroll.

// globally
import { createApp } from 'vue'
import App from './App.vue'
import VueDragscroll from "vue-dragscroll";
const app = createApp(App);
app.use(VueDragscroll);
app.mount('#app')

// locally
import { dragscroll } from 'vue-dragscroll'
export default {
  directives: {
    dragscroll
  }
}

2. Basic usage.

<div v-dragscroll>
  ... Scrollable Content Here
<div>

<!-- For more control -->
<div v-dragscroll="true">
  ... Scrollable Content Here
<div>

3. Disable the draggable functionality on children.

<div v-dragscroll:nochilddrag>
  ... Scrollable Content Here
<div>

4. Enable only horizontal or vertical scrolling.

<div v-dragscroll.x>
  ... Scrollable Content Here
<div>
<div v-dragscroll.y="true">
  ... Scrollable Content Here
<div>

Preview:

Changelog:

v4.0.2 (07/29/2022)

• Drop v2 Support
• Migrate to TS and Vite

v3.0.0 (03/30/2021)

• Add vue 3 support

v2.1.3 (01/27/2021)

• update

v2.1.0 (12/12/2020)

• added scoll container option

Download Details:

Author: donmbelembe

Live Demo: https://vue-dragscroll.donfalcon.com/

Download Link: https://github.com/donmbelembe/vue-dragscroll/archive/master.zip

Official Website: https://github.com/donmbelembe/vue-dragscroll

Install & Download:

$ npm install vue-dragscroll