vue-dragscroll
Install
Via npm
Command
npm install vue-dragscroll
Install globally (main.js)
import Vue from 'vue' import VueDragscroll from 'vue-dragscroll' Vue.use(VueDragscroll)
(Or) Install for a single component
import { dragscroll } from 'vue-dragscroll'
export default {
directives: {
dragscroll
}
}
Via cdn
Tag
<script src="https://unpkg.com/vue-dragscroll"></script>
Usage
Just add the directive to the parent element
<div v-dragscroll> ... <div>
<!-- For more control -->
<div v-dragscroll="true"> ... <div>
<div v-dragscroll="false"> ... <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
On below examples, you can scroll on when holding mouse outside of child element
(Outside of the text or red box)
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?
firstchilddrag
<div v-dragscroll:firstchilddrag>
<div class="subContainer">...<div>
<div>
When using nochilddrag, all elements inside the the parent element will not be dragable
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.
The directive provides 3 events.
- dragscrollstart
- dragscrollmove
- dragscrollend
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>