Documentation)
vue-dragscroll (This is a FORK based on original vue-dragscroll package :
- Pass the shift and ctrl key modifiers to dragscrollmove custom event
vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style, online demo).
Installation
Via npm
$ npm install vue-dragscroll
Then, in your JavaScript file:
// Register dragscroll globallyVue // Or, register it locally in a component name: 'MyComponent' directives: 'dragscroll': dragscroll
Via cdn
Download the and unpack distribution
<!-- OR -->
Usage
Add the v-dragscroll
directive to a scrollable element:
Big text goes here...
That's it! Now you can scroll it by dragging.
Keep in mind that now it is not possible to select the content with
mouse, so apply the cursor: default;
CSS style to prevent confusing
the users (or even cursor: grab;
in case the content is not a text).
/* EXEMPLE */
You can also add the :nochilddrag
argument to the v-dragscroll,
which will only enable drag-scrolling for an element itself, but not
for its subchildren. This can be usefull, if you want to enable the
scrolling the area by dragging its empty space, but keep the
opportunity to select the text (see
example).
...content
If you wish to handle enable/disable dragscrolling, you can pass a boolean
as value (This doesn't apply for mobile)
...content
If you wish to scroll only Vertically or Horizotally, you can use x
or y
modifiers.
...content ...content
Select which elements can be dragged (data attributes method)
...<!-- can be dragged --> ...<!-- can't be dragged --> ...<!-- can be dragged --> ...<!-- can't be dragged -->
Firstchilddrag (DEPRECATED, prefer data attributes)
...
It would be helpful if scroll were passed to the window object, when max scroll position were reached, you can use pass
modifier.
...content
If you want to apply dragscroll 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.
<!-- Vue --> ...content <!-- HTML generated --> ...content
In this case to control if drag should be enabled/disabled you can add the active
parameter.
...content
If you wish to ignore specific mouse buttons, you can use the following modifiers.
- noleft
- nomiddle
- noright
- noback
- noforward
...content ...content
Events
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:
..Content
Follow me on twitter: https://twitter.com/don_jon243