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