vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style).
For vue 2 please use the version 3.0 of this package
Via NPM
npm install vue-dragscroll
Install globally (main.js)
import { createApp } from 'vue' import App from './App.vue' import VueDragscroll from "vue-dragscroll"; const app = createApp(App); app.use(VueDragscroll); app.mount('#app')
(Or) Install for a single component
import { dragscroll } from 'vue-dragscroll' export default { directives: { dragscroll } }
Via CDN
<body>
<div id="app">
<div vue-dragscroll>
...
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-dragscroll"></script>
<script>
const App = {
data() {
return {
message: 'Hello World'
}
}
}
const app = Vue.createApp(App);
app.use(VueDragscroll);
app.mount('#app')
</script>
</body>
Just add the directive to the parent element
<div v-dragscroll> ... <div>
<!-- For more control -->
<div v-dragscroll="true"> ... <div>
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit
Lorem ipsum
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam
ameturutem. Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Loremlaboriosam deserunt ipsa?
deserunt ipsa?
Lorepedit laboriosam deserunt ipsa?
Loremeturutem. Unde impedit laboriosam deserunt ipsa?
Lorepedit laboriosam deserunt ipsa?
Lore ameturutem. Unde impedit laboriosam deserunt ipsa?
Directive with :nochilddrag argument
<div v-dragscroll:nochilddrag> ... <div>This will only enable drag-scrolling for an element itself, but not for its children.Check this example
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit
Lorem ipsum
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam
deserunt ipsa?
Lorem ipsum doipsa?
Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
deserunt ipsa?
laboriosam deserunt ipsa?
Loremlaboriosam deserunt ipsa?
deserunt ipsa?
Lorepedit laboriosam deserunt ipsa?
Loremeturutem. Unde impedit laboriosam deserunt ipsa?
Lorepedit laboriosam deserunt ipsa?
Lore ameturutem. Unde impedit laboriosam deserunt ipsa?
Horizontally only or Vertically only
<div v-dragscroll.x> ... <div> <!-- Or --> <div v-dragscroll.y="true"> ... <div>
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit
Lorem ipsum
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam
ameturutem. Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Unde impedit laboriosam deserunt ipsa?
Lorem ipsum dolor sit ameturutem. Unde impedit laboriosam deserunt ipsa?
Loremlaboriosam deserunt ipsa?
deserunt ipsa?
Lorepedit laboriosam deserunt ipsa?
Loremeturutem. Unde impedit laboriosam deserunt ipsa?
Lorepedit laboriosam deserunt ipsa?
Lore ameturutem. Unde impedit laboriosam deserunt ipsa?
Select which elements can be dragged
<div v-dragscroll>
<div class="child">...<div><!-- can be dragged -->
<div class="child" data-no-dragscroll>...<div><!-- can't be dragged -->
<div>
<div v-dragscroll:nochilddrag>
<div class="child" data-dragscroll>...<div><!-- can be dragged -->
<div class="child">...<div><!-- can't be dragged -->
<div>
When using the directive all elements inside will be draggable. You can use data-no-dragscroll to tell which elements can't be dragged.
In the same way, if you are using nochilddrag you can use data-dragscroll to tell which element can be dragged.
firstchilddrag (DEPRECATED, prefer data attributes)
<div v-dragscroll:firstchilddrag>
<div class="subContainer">...<div>
<div>
When using nochilddrag, all elements inside the parent element will not be draggable, but in some case you may need to have only one subchild and multile grandchild and only the grandchild should not be dragable.
Pass scroll when max reached
<div v-dragscroll.pass>
<div class="subContainer">...<div>
<div>
It would be helpful if scroll were passed to the window object, when max scroll position were reached.Pass scroll to a container when max reached
<div class="scroller-container" style="overflow: auto; height: 300px">
<div class="scroller" style="height: 600px">
<div v-dragscroll.pass="{container: '.scroller-container'}>
<div class="subContainer">...<div>
<div>
<div>
<div>
It would be helpful if scroll were passed to the encapsulating scrolling context, when max scroll position were reached.Apply dragscroll to a child dom element
<!-- Vue -->
<mycomponent v-dragscroll="{ target: '.my-draggable-div' }">
</mycomponent>
<!-- HTML generated -->
<div class="mycomponent">
<div class="my-draggable-div"></div>
</div>
Use case: when you want to apply the directive to a child dom element you have no control over (because generated by vuejs).
You can use v-dragscroll="{ target: 'element' }" to tell to which child the directive will be applied. This element string must be a valid CSS selector string (used by querySelector). Examples: '#element_id', '.element_class', 'section'.
To control if drag should be enabled/disabled you can add the active parameter to the directive.
<!-- Vue -->
<mycomponent v-dragscroll="{ target: '.my-draggable-div', active: true }">
</mycomponent>
Ignore specific mouse buttons
You can use the following modifiers:
<div v-dragscroll.noleft="true">
<div class="subContainer">...<div>
<div>
This will not scroll using left click. (try with right click)The directive provides 3 events.
The dragscrollmove event includes a data object with the following format:
{ detail: { deltaX: 0, // if using the x modifier, or no axis modifier deltaY: 0, // if using the y modifier, or no axis modifier }, }
example:
<div v-dragscroll v-on:dragscrollstart="doSomething" v-on:dragscrollmove="doSomething(params, $event.detail.deltaX)" v-on:dragscrollend="doSomething"> ... </div>